为什么大胆monoface在Windows垂直位移？

StackOverflow https://stackoverflow.com/questions/2432328

题

在火狐3.6，IE7和Windows歌剧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>

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

这是为什么？我怎样才能解决这个问题？

有帮助吗？

解决方案

  

这是为什么？

出色的问题。只花了一个半小时试图找出原因，无果。 Marcgg的解决方案似乎不工作，要么，偏移仍然存在。谷歌变成了什么。这似乎只发生在Windows上，不只是在你提到的浏览器，而且在Opera 9和IE6。 不在Firefox 2.0虽然。令人费解。

  

我怎样才能解决这个问题？

到目前为止已经工作了我的唯一解决方案是这样的：

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

即，指定信使而不是等宽。这在我测试（;歌剧10，FF 3和Konqueror Ubuntu的下IE6，Opera 9中，FF 2.0 Windows 2000下）的所有浏览器一致地呈现。至于为什么，我仍然不知道。

其他提示

这只是一个光学效果。抢截图和缩放：你会看到文本基线并没有改变。

如果您选择不同的颜色反差应该自我修复。

更新

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

问题是字体“宋体”，这是默认的字体用我的大部分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>

使用这个代码，可以看到的是，中间文本向上移位（=不同基线偏置），但背景颜色现在被适当地对准。

的解决方案是，以请求“信使”作为字体和避免“信使新建”。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top