我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?
当前回答
这可能是迂迂的，但到目前为止，还没有人真正给出一个解决方案“只使用CSS创建一个关闭按钮。”给你:
#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
http://codepen.io/anon/pen/VaWqYg
其他回答
HTML
✕ ✕ ✓ ✓ ✖ ✖ ✔ ✔
✗ ✗ ✘ ✘
× × ×
CSS
在::before或::after伪元素中使用转义的\ Unicode HEX值，如下所示:
[class^="ico-"]， [class*=" ico-"] { 字体:normal 1em/1 Arial, sans-serif; 显示:inline-block; ｝ .ico-times::before{内容:"\2716";｝ .ico-check::before{内容:"\2714";｝ <i class="ico-times" role="img" aria-label="Cancel"></i> . <i class="ico-check" role="img" aria-label="Accept"></i> .
用例:
| Language | Syntax | Example |
|---|---|---|
| HTML | ✕ | <button class="close" type="button">✕ Close</button> |
| CSS | \2715 | .close::before { content: '\2715'; } |
| JavaScript | \u2715 | document.querySelector(".close").prepend("\u2715") |
https://home.unicode.org/
正如@Haza指出的，可以使用时间符号。Twitter Bootstrap将此映射为一个关闭图标，用于解散情态动词和提醒等内容。
<button class="close">×</button>
您可以通过将文本放置在以可访问方式隐藏的跨度中来使用仅供屏幕阅读器访问的文本。把x放在屏幕阅读器无法读取的CSS中，这样就不会混淆，但在页面上是可见的，键盘用户也可以访问。
<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'\00d7'; color:red; font-size:2em;}
</style>
<button class="close"><span class="hidden">close</span></button>
如果使用×-mark(乘法符号)，×在HTML中，为了那个?
“x”(字母)不能用来表示字母x以外的任何东西。
报;比✖& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色，并被一个“表情符号”所取代
