我想只使用CSS创建一个关闭按钮。

我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?


当前回答

使用现代浏览器,你可以旋转一个+号:

.popupClose:before {
    content:'+';
}
.popupClose {
    position:relative;
    float:right;
    right:10px;
    top:0px;
    padding:2px;
    cursor:pointer;
    margin:2px;
    color:grey;
    font-size:32pt;
    transform:rotate(45deg);
}

然后简单地把下面的HTML放在你需要的地方:

 <span class='popupClose'></span>

其他回答

报;比&#10006;& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色,并被一个“表情符号”所取代

报;and font-family: Garamond,“苹果Garamond”;让它足够好。Garamond字体很薄,网络安全

这对我来说很管用:

<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();'>&#10006;</a>
    Click "X" to close this box
</div>

我更喜欢字体很棒:http://fortawesome.github.io/Font-Awesome/icons/

你要找的图标是fa-times。使用起来很简单:

<button><i class="fa fa-times"></i> Close</button>

小提琴在这里

是另一个不太厚的好选项。HTML代码是&#10005;,或者十六进制的2715。