我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?
当前回答
忘记字体，使用背景图像!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Select :after pseudo class/element</title>
<style type="text/css">
.close {
background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
text-indent:-10000px;
width:20px;
height:20px;
}
</style>
</head>
<body>
<input type="button" class="close" value="Close" />
<button class="close">Close</button>
</body>
</html>
对于使用屏幕阅读器访问页面的用户来说，这将更容易访问。
其他回答
如果使用×-mark(乘法符号)，×在HTML中，为了那个?
“x”(字母)不能用来表示字母x以外的任何东西。
忘记字体，使用背景图像!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Select :after pseudo class/element</title>
<style type="text/css">
.close {
background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
text-indent:-10000px;
width:20px;
height:20px;
}
</style>
</head>
<body>
<input type="button" class="close" value="Close" />
<button class="close">Close</button>
</body>
</html>
对于使用屏幕阅读器访问页面的用户来说，这将更容易访问。
正如@Haza指出的，可以使用时间符号。Twitter Bootstrap将此映射为一个关闭图标，用于解散情态动词和提醒等内容。
<button class="close">×</button>
我更喜欢字体很棒:http://fortawesome.github.io/Font-Awesome/icons/
你要找的图标是fa-times。使用起来很简单:
<button><i class="fa fa-times"></i> Close</button>
小提琴在这里
是另一个不太厚的好选项。HTML代码是✕，或者十六进制的2715。
