Html 为什么粗体单面在窗口上垂直移动？
在Windows上的Firefox 3.6、IE7和Opera 10中，这种HTML有一种奇怪的行为：Html 为什么粗体单面在窗口上垂直移动？,html,css,layout,bold,monospace,Html,Css,Layout,Bold,Monospace,在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</s
<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>
跨度{
字体系列：单空格；背景色：绿色；
}
跨度b{
字体大小：粗体；
}
文本文本文本
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
即，指定Courier而不是monospace。这在我测试过的所有浏览器（Windows 2000下的IE6、Opera 9、FF 2.0；Ubuntu下的Opera 10、FF 3和Konqueror）中呈现一致。至于原因，我仍然不知道。这只是一种光学效应。抓取一个屏幕截图并放大：你会看到文本基线根本没有改变 如果你选择不同的颜色对比度，它会自行修复 更新 问题在于字体“Courier New”，这是大多数Windows浏览器在请求“monospace”时使用的默认字体。对于粗体变体，基线位于不同的偏移：
<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 New”；背景色：绿色；
}
跨度b{
字体大小：粗体；垂直对齐：顶部；
}
文本文本文本
解决方案是请求将“Courier”作为字体，并避免使用“Courier New”。对于“monospace bold”，span.offsetTop为9，其中其他span的offsetTop==8。奇怪。有没有办法找出浏览器在monospace中使用的字体？好的，找到了。问题是“新的”。我的猜测是，对于粗体变体，基线位于不同的偏移量。@Aaron:有趣的问题。谷歌给了我这些数据：不知道它们来自哪里，也不知道它们是否可信。@Aaron:很好的发现。我正在从我的答案中删除“Courier New”。我认为这种变化是因为粗体字体的基线比普通字体的基线高出一个像素。我现在的问题是，整条线的边界框比其他线的边界框大一个像素。我想你没有测试我的建议，所以我附上一张截图。在新窗口中打开图像；StackOverflow似乎调整了图片的大小。在我的屏幕上，基线正确对齐，但中间文本的绿色背景向下移动了一个像素。那是哪个版本的Windows？哪个浏览器？哪种字体？Windows XP SP3、Firefox 3.6、Courier New