在Firefox中使用十进制值计算宽度,但在Webkit中没有小数

Question

我在使用不同浏览器的HTML,CSS时遇到了一个奇怪的问题:Firefox 3.6和Webkit浏览器(Chrome和Safari).

我的HTML看起来像这样:

<div class="ln-letters">
    <a href="#" class="all">ALL</a>
    <a href="#" class="a">A</a>
    <a href="#" class="b">B</a>
    <a href="#" class="c">C</a>
</div>

我的CSS是......

.ln-letters a { 
    font-family: 'Lucida Grande';
    font-size:14px;
    display:block;
    float:left;
    padding:0px 7px;
    border-left:1px solid silver;
    border-right:none;
    text-decoration:none;
}

因此,您可以猜测,每个锚点根据其内部文本获得不同的宽度.例如,具有文本"ALL"的第一个元素将比其他元素更大(更宽).

现在问题是在Firefox中(使用Firebug)我可以看到第一个元素的计算宽度是26.5667px,而在Chrome中(使用Chrome的开发人员工具),同一元素的计算宽度恰好是27px.

因此div.ln-letters在每个浏览器中以不同的宽度结束,这给我带来了一些麻烦.

问题是:有什么办法可以避免Firefox计算十进制值吗？或相反:迫使Chrome计算小数值？

先感谢您!

Answer 1

我认为粗体问题的答案是“否”，并且我不清楚您真正想要解决的问题是什么。您不能期望所有平台上的所有浏览器都以完全相同的方式显示您的页面（例如，因为不同的平台可能使用不同的字体来呈现您的页面）。如果您希望 div 具有固定宽度，请在 CSS 中明确设置。

关于分数像素混乱的一些相关链接：

• http://ejohn.org/blog/sub-pixel-problems-in-css/
• DOM 元素宽度可以是非整数吗？