Verdana字体在IE9中是随机高度

Question

我有一系列简单的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/

Answer 1

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

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

Answer 2

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

使用​标记代替ZERO WIDTH SPACE U + 200B <wbr>。它没有已知的缺点，除了它可能会刺激那些发誓标准的人。但是由于某些浏览器中的某些issues，它并不总是具有预期效果（允许直接换行），而且似乎要覆盖几乎所有浏览器，您需要这样：

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

使用CSS代码

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

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

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

或更简单，

<small>&#8203;</small>

然后解释。这个问题似乎只出现在Quirks模式的IE 9上。我的假设是，在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可能仍然存在问题。