我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?
当前回答
这对我来说很管用:
<style>
a.closeX {
position: absolute;
right: 0px; top: 0px; width:20px;
background-color: #FFF; color: black;
margin-top:-15px; margin-right:-15px; border-radius: 20px;
padding-left: 3px; padding-top: 1px;
cursor:pointer; z-index: -1;
font-size:16px; font-weight:bold;
}
</style>
<div id="content">
<a class="closeX" id="closeX" onclick='$("#content").hide();'>✖</a>
Click "X" to close this box
</div>
其他回答
还有一个没有在这里提到-很薄-如果你的项目需要这样的外观:╳
╳ or decimal: ╳
报;and font-family: Garamond，“苹果Garamond”;让它足够好。Garamond字体很薄，网络安全
您可以通过将文本放置在以可访问方式隐藏的跨度中来使用仅供屏幕阅读器访问的文本。把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>
报;比✖& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色，并被一个“表情符号”所取代
×& # 215;或者报;U+00D7的乘法号
×相同字符，字体粗细较强
⨯& # 10799;U+2A2F吉布斯积
✖& # 10006;U+2716沉重的乘法符号
如果你支持，还有一个表情符号❌。如果你没有，你只看到一个正方形= ❌
我还在Codepen上制作了这个简单的代码示例，当时我和一个设计师一起工作，当我问他是否可以用一个编码版本而不是图像替换你的关闭按钮时，他让我向她展示它会是什么样子。
<ul>
<li class="ele">
<div class="x large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop large"><b></b><b></b><b></b><b></b></div>
<div class="x t large"><b></b><b></b><b></b><b></b></div>
<div class="x shift large"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop medium"><b></b><b></b><b></b><b></b></div>
<div class="x t medium"><b></b><b></b><b></b><b></b></div>
<div class="x shift medium"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop small"><b></b><b></b><b></b><b></b></div>
<div class="x t small"><b></b><b></b><b></b><b></b></div>
<div class="x shift small"><b></b><b></b><b></b><b></b></div>
<div class="x small grow"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x switch"><b></b><b></b><b></b><b></b></div>
</li>
</ul>
