1

我有一系列简单的 div，其跨度包含“零宽度字符”（#8203）和文本跨度。

在 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/

在此处输入图像描述

4

2 回答 2

0

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

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

<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 没有该字符（与大多数其他常见字体不同），并且可能会从浏览器默认字体中选择它。这意味着默认为 Times New Roman。在该字体中，零宽度空间比 Verdana 字符高，导致增加了高度要求。这听起来令人难以置信（它毕竟是零宽度，因此不可见），但事实是如果我将默认字体（在 IE 设置中）更改为 Arial，问题就会消失。

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

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

于 2012-11-14T17:24:40.160 回答
0

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

<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css"/>
<![endif]-->
于 2012-11-14T16:19:05.953 回答