Question

考虑这个HTML：

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">
body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    line-height:20px;
    font-size:14px;
}
.a {
    float:left;
}
.b {
    font-weight:bold;
}
</style>
</head>

<body>
    <div class="a">something1</div>
    <div class="a b">something2</div>
</body>
</html>

在除Firefox / Mac之外的所有浏览器上，它都能正确呈现，即粗体和非粗体文本位于同一基线上。

在Firefox / Mac上，粗体和非粗体文本之间存在1px的基线差异。请参阅下面的截图。左边是Safari 3.2.3，右边是Firefox 3.0.10。

alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png

有没有办法解决这个问题，例如使用一些CSS，除了在角落里静静地哭泣并使用Arial（我不想这样做 - 如果可能的话，我会留在Helvetica Neue）。 / p>

Answer 1

我的直觉反应是花车行为不端。我没有Mac，但你可以尝试这样做：

<span>something1</span><span class="b">something2</span>
<span class="a">something3</span><span class="a b">something4</span>

看看他们的基线是否正确？

Answer 2

瞄准行高可以解决这个问题，但不确定它是否是罪魁祸首。如果您有CSSEdit（或刷新很多），您可以通过一次增加行高1px来观察行为。

字体大小14px几乎不可能。 FF会将粗体元素1像素放在某些行高处，而safari会将它放在完全相反的位置！（即行高20px safari会丢失粗体1像素，而firefox正常呈现，与您的问题相反）。

除了以3像素的行高，两者呈现相同。但是3像素的线高是很奇怪的，如果你的布局搞砸了，你可能需要通过调整margin-top来适应。

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 3px;
    float: left;
    margin-top: 9px;
}

在13px的字体大小下，所有内容都在21px行高（这更接近常规行高）呈现相同的效果。

使用不同的字体大小和行高，我相信你会找到你需要的东西。

或者破解它，如果这是你的滚动方式：

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 21px;
    float: left;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Safari 3.0 and Chrome rules here */

    .a {
        line-height: 20px;
    }

}

Firefox / Mac的Helvetica Neue基线渲染问题

2 个答案: