Fatal编程技术网
  • fonts/
  • Fonts 如何使单个字符在所有浏览器和操作系统中处于相同的中心位置？

Fonts 如何使单个字符在所有浏览器和操作系统中处于相同的中心位置？

fonts css

Fonts 如何使单个字符在所有浏览器和操作系统中处于相同的中心位置？,fonts,cross-platform,cross-browser,css,Fonts,Cross Platform,Cross Browser,Css,我正在使用CSS3 border radius在此网站上创建圆形按钮： 但是，由于Mac和Windows（而不是浏览器）之间字体呈现的差异，按钮文本在其边界圆内的居中不一致。按钮在Windows中所有支持CSS3的浏览器中都能正确呈现，但在OS X或Linux中不能 下面是一些简单的代码，在某种程度上再现了这个问题： <html> <head> <title>Rounded Buttons Example</title> <style ty

我正在使用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>


圆形按钮示例
div{填充：1em；边距：1em}
a{文本装饰：无；颜色：#000；}
#帮助链接，#添加链接{
显示：块；
高度：1.4em；
宽度：1.4em；
文本对齐：居中；
线高：1.4；
字号：1.5em；
填充：0；
边框：1em实心#000；
-moz边界半径：.8em；
-webkit边界半径：.8em；
边界半径：.8em；
}
#帮助链接：悬停，#添加链接：悬停{
边界宽度：.15em；
边缘：-.05em；
-moz边界半径：.85em；
-webkit边界半径：.85em；
边界半径：.85em；
}
我已经为此挣扎了一段时间，现在开始变得一团糟。如果这是一个与CSS3规范相关的问题，我可能会放弃它，但在我看来，这是一个跨浏览器字体问题（在方形按钮中居中也不起作用）。有什么想法吗

编辑

我想澄清一下，我希望按钮位于圆形边框的正中央。主要问题是垂直居中，因为在OSX和Windows中字体高度不同，即使指定了行高和字体大小。我同意在按钮内手动定位角色的解决方案，但我已经尝试过，手动将一个操作系统置于中心位置会对其他操作系统产生不利影响。

嗯

div {text-align: center;}
?

我一定是错过了什么

或者，您可以将
标记包装在
标记中，并在
标记上设置
文本对齐：居中

编辑

在进一步查看您的页面后，您似乎正在尝试将绝对定位的内容居中。这很难。确保您没有将
标记声明为
显示：块
，并且可以将其居中，因为默认情况下
标记是内联的

编辑2


进一步检查后，您需要做的就是将
#help
规则设置为
left:50%
，然后摆脱
right
规则。即使在绝对定位的情况下，也可以将其居中：）
我发现了问题。原始页面中的字体声明为“Helvetica，sans serif”。Windows没有Helvetica，所以它是用Arial渲染的。所有Mac浏览器都在Helvetica中渲染，因此存在渲染问题。更改为“Arial，sans serif”解决了这个问题。
我认为您的做法是正确的。将文本居中放置在
div
上，而不是像他现在这样放置在
a
标记上。我会尝试这样做，但不会影响垂直定位。我可以手动设置页边距，使内容看起来居中，但我还没有找到一种在Windows、OS X和Linux上显示相同内容的方法。编辑--将文本对齐：居中应用于包含的div没有任何效果。您希望项目如何垂直定位？你所提到的只是居中…垂直和水平居中。如果你在Windows中查看该网站，你就会明白我的意思。在Mac上，Firefox中的问号太高，Chrome.ps中的+太低。我在PC上，所以我没有办法重现你的Mac问题。也许你不应该把90%的时间花在担心少于8%的用户看到的东西上：）一个注释，位置：固定；IE6不支持。不过，我不会把重点放在这一点上，因为使用你网站的人肯定会有Firefox或Safari（网络开发者和图形艺术家）。