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

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


当前回答

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

其他回答

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

.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>

如果使用×-mark(乘法符号),&times;在HTML中,为了那个?

“x”(字母)不能用来表示字母x以外的任何东西。

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

这是为那些想让他们的X小/大和红色的人准备的!

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

CSS:

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}

这可能是迂迂的,但到目前为止,还没有人真正给出一个解决方案“只使用CSS创建一个关闭按钮。”给你:

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg