Verdana字体在IE9中是随机高度答案

【问题标题】：Verdana font is random height in IE9Verdana字体在IE9中是随机高度
【发布时间】：2012-11-14 15:12:26
【问题描述】：

我有一系列简单的 div，其 span 包含“零宽度字符”(#8203)，span 包含文本。

在 IE9 中渲染时存在 1px 的高度差，或者说外跨的偏移量。什么样的优化可能会导致这种情况？

是否有任何 css/javascript 解决方法可以禁用它？

...
<p>.</p>
<div class="wrap">
    <span class="outer">
        <span class="inner">&#8203;</span>
    </span>
    <span class="outer">
        <span class="inner">8203820382038203820382038203820382038203</span>
    </span>
</div>
<p>.</p>
...

http://jsfiddle.net/srfCR/

【问题讨论】：

标签： css internet-explorer-9

【解决方案1】：

您可以创建一个特定的 css 文件来解决此问题：

<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css"/>
<![endif]-->

【讨论】：

【解决方案2】：

这是一个棘手的问题。我将从实际的解决方案开始：

使用<wbr> 标签代替零宽度空间U+200B &#8203;。它没有已知的缺点，只是它可能会激怒那些以标准发誓的人。但是由于某些浏览器中的一些issues，它并不总是具有预期的效果（允许直接换行），而且似乎要涵盖几乎所有浏览器，您需要这个：

<wbr><a class=wbr></a>

带有 CSS 代码

.wbr:after { content: "\00200B"; }

另一种方法是将零宽度空间包装在具有减小字体大小的元素中，例如

<span style="font-size: 0.8em">&#8203;</span>

或者，更简单，

<small>&#8203;</small>

然后是解释。该问题似乎只出现在 IE 9 的 Quirks 模式下。我的假设是，在 Quirks 模式下，IE 对字体管理应用了更原始的方法。

当它在 Verdana 文本中遇到零宽度空格时，它会注意到 Verdana 没有该字符 (unlike most other common fonts)，并可能从浏览器默认字体中选择它。这意味着默认为 Times New Roman。在该字体中，零宽度空间比 Verdana 字符高，导致增加了高度要求。这听起来令人难以置信（它毕竟是零宽度，因此不可见），但事实是如果我将默认字体（在 IE 设置中）更改为 Arial，问题就会消失。

有人可能会认为font-family: Verdana, Arial 有帮助。它没有，显然是因为 Quirks Mode IE 在处理字体方面非常原始：它不检查 font-family 列表，而是回退到其默认字体。

让你的页面避开Quirks Mode可以避免IE 9上的问题，但我担心一些旧版本的IE可能仍然存在问题。

【讨论】：