1

好的，这是一个很难解决的问题：

我有一个网站设计，它受到使用 DirectWrite 与 GDI 呈现字体的浏览器之间不同的行高的严重影响。这导致背景图像在 IE9 和 FF4+ 中未对齐（以及其他问题）。

这是一个简单的例子：

假设我们已经重置了 CSS。代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
span {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    border: solid 1px;
}
</style>
</head>
<body>
<span>Some example text</span>
</body>
</html>

这以以下方式呈现：

直接写v gdi

如您所见，IE9（和 firefox 4+）中的文本比旧 GDI 浏览器短 1px。这会在我的网站的整个布局中引起重大问题，特别是在将背景图像（例如图标）放入内联元素时，如从我网站上完全相同的页面截取的两个屏幕截图所示（为了清晰起见，每 3px 添加行并加衬与第一行文本）：

错位

最终结果是图标在 IE9 中显示为 1px 和 2px。一种可能的解决方案是添加一个 2px 的 padding-top 来下推文本以与图标保持一致。除了 hacky 和一团糟（你能在 css 中挑出 firefox 4+ 吗？）所需的填充因元素而异（在我的情况下为 1-3px）并导致其自身的问题。

到底是怎么回事？我知道 DirectWrite 在某些情况下可以使字体更小，但是为什么浏览器制造商要改变以前的行高呢？当然，这会影响很多网站。

任何帮助将不胜感激。

干杯，狮子座

4

0 回答 0