Question

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

我的网站设计受到使用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>

以下列方式呈现：

directwrite v gdi

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

misaligned

最终结果是IE9中的图标显示为1px和2px。一种可能的解决方案是添加2px的填充顶部以按下文本以与图标保持一致。除了hacky和一个完整的混乱（你可以在css中单独输出firefox 4+吗？）所需的填充因元素而异（就我的情况而言，只有1-3px）并导致其自身的问题。

发生了什么事？据我所知，DirectWrite可以在某些情况下缩小字体，但为什么浏览器制造商会改变之前的线条高度呢？当然这会影响很多网站。

非常感谢任何帮助。

干杯，利奥

IE9 / Firefox 4+（DirectWrite）行高与旧版GDI浏览器不一致

0 个答案: