3

在 Windows 上的 Firefox 3.6、IE7 和 Opera 10 中，这个 HTML 有一个奇怪的行为：

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

中间的粗体跨度向下移动了一个像素。其他字体不会发生这种情况。

这是为什么？我该如何解决？

4

3 回答 3

1

这是为什么？

很好的问题。只是花了半个小时试图找出原因，无济于事。Marcgg 的解决方案似乎也不起作用，偏移量仍然存在。谷歌一无所获。这似乎只发生在 Windows 上，不仅在您提到的浏览器中，而且在 Opera 9 和 IE6 中。但不在Firefox 2.0 中。令人费解。

我该如何解决？

到目前为止对我有用的唯一解决方案是：

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

即，指定 Courier 而不是等宽。这在我测试的所有浏览器（Windows 2000 下的 IE6、Opera 9、FF 2.0；Ubuntu 下的 Opera 10、FF 3 和 Konqueror）中始终呈现。至于为什么，我仍然不知道。

于 2010-03-12T12:10:16.450 回答
1

这只是一种光学效应。抓取屏幕截图并放大：您会看到文本基线根本没有改变。

如果您选择不同的颜色对比度，它应该会自行修复。

更新

替代文字 http://img690.imageshack.us/img690/421/opticaleffect.png

于 2010-03-12T12:52:10.240 回答
0

问题是字体“Courier New”，这是在请求“等宽”时我的大多数 Windows 浏览器使用的默认字体。对于粗体变体，基线处于不同的偏移量：

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

使用此代码，您可以看到中间文本向上移动（= 不同的基线偏移），但背景颜色现在正确对齐。

解决方案是请求“Courier”作为字体并避免“Courier New”。

于 2010-03-12T13:07:09.100 回答