我正在使用 CSS3 border-radius 在此网站上创建圆形按钮:
但是，由于 Mac 和 Windows 之间(而非浏览器之间)的字体呈现差异，按钮文本在其边界圆内的居中不一致。按钮在 Windows 中所有支持 CSS3 的浏览器中都能正确呈现，但在 OS X 或 Linux 中却不能。
这里是一些更简单的代码，在某种程度上重现了这个问题:
<html>
<head>
<title>Rounded Buttons Example</title>
<style type='text/css'>
div {padding:1em; margin:1em}
a {text-decoration:none; color:#000;}
#help_link, #add_link {
display:block;
height: 1.4em;
width: 1.4em;
text-align:center;
line-height: 1.4;
font-size:1.5em;
padding:0;
border:.1em solid #000;
-moz-border-radius:.8em;
-webkit-border-radius:.8em;
border-radius:.8em;
}
#help_link:hover, #add_link:hover {
border-width:.15em;
margin:-.05em;
-moz-border-radius:.85em;
-webkit-border-radius:.85em;
border-radius:.85em;
}
</style>
</head>
<body>
<div>
<a id='help_link' href='#'>?</a>
</div>
<div>
<a id='add_link' href='#'>+</a>
</div>
</body>
</html>
我已经为此苦苦挣扎了一段时间，现在开始变得一团糟。如果这是与 CSS3 规范相关的问题，我可能会放手，但在我看来，这是一个跨浏览器的字体问题(居中在方形按钮中也不起作用)。有什么想法吗？
编辑
我想澄清一下，我希望按钮位于圆形边框的正中心。主要问题是垂直居中，因为即使指定了行高和字体大小，OS X 和 Windows 中的字体高度也不同。我可以接受涉及在按钮内手动定位 Angular 色的解决方案，但我已经尝试过，手动以一个操作系统为中心会对其他操作系统产生不利影响。
最佳答案
我发现了问题。原始页面中的字体声明为“Helvetica, sans-serif”。 Windows 没有 Helvetica，所以它用 Arial 呈现。所有 Mac 浏览器都在 Helvetica 中呈现，因此存在呈现问题。更改为“Arial, sans-serif”可解决此问题。
关于fonts - 如何让单个字符在所有浏览器和操作系统中都居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2137126/