如何使字体“Lucida Sans Unicode”在 IE9 和 Chrome 中以相同的方式呈现？答案

【问题标题】：How to make the font "Lucida Sans Unicode" render the same way in IE9 and Chrome?如何使字体“Lucida Sans Unicode”在 IE9 和 Chrome 中以相同的方式呈现？
【发布时间】：2013-04-01 02:16:51
【问题描述】：

我在一个项目中使用字体“Lucida Sans Unicode”，但遇到了问题。在 IE9 中，文本下方有一些空间，我不知道为什么会这样。在 Chrome 中没有那么多空间。这是一个例子，你看到的边框来自IE9开发者工具中的“点击时选择元素”功能：

这是浏览器模式：IE9 和文档模式：IE9 标准。

这是浏览器模式：IE8 和文档模式：IE8：

如您所见，“p”下方的空间较小。 Chrome 的显示方式与 IE8 模式相同。

当我想对齐东西时，渲染的差异会造成麻烦；当一个浏览器正常时，另一个浏览器就不行了。

有谁知道为什么会发生这种情况，更重要的是，如何解决？

提前感谢所有回复。

编辑：
小提琴：http://jsfiddle.net/94Tq9/
.

【问题讨论】：

那个元素是什么？你能提出一个说明问题的 jsFiddle 吗？
stackoverflow.com/questions/9574844/…的可能重复
您应该在分配样式之前重置所有 CSS。通过这种方式，您可以消除浏览器对元素的不同行为方式。
@simpleBob 字符的呈现方式并没有不同，只有文本周围的间距..
您能详细说明一下吗？ “重置所有 CSS”是什么意思，我该怎么做？

标签： html css

【解决方案1】：

我不能告诉你为什么会这样，但值得注意的是这是一个渲染问题而不是布局问题。换句话说，段落的行高不受影响，只是 IE 认为它应该画一个边框。（我没有检查可点击区域，抱歉。）

如果如您的图片所示，您可以将display:inline-block; 添加到锚样式，则只要您设置了line-height，IE8 和IE9 就会以相同的方式呈现。

我目前被放逐到一个只有 IE 的存在（长篇故事），所以我不能说这是否也适用于 Chrome。

【讨论】：

您好，感谢您的建议，它有所作为！如果您查看我的 OP 中的小提琴，然后在 a 样式中添加 display: inline-block; line-height: 25px;，您会看到文本周围的边框缩小了。但是，有一个问题.. IE9 和 Chrome 之间仍然存在差异。在 IE9 中，底部边框位于 g 字符的最低部分的下方，但在 Chrome 中，边框实际上位于较高位置，因此 g 的低部分位于边框下方。 Chrome 中的文本上方还有更多空间。所以不幸的是，我似乎无法使用这个解决方案。

【解决方案2】：

好的，所以我找到了解决这个问题的方法。这肯定不理想，但是我们组织中的其他人已经使用了这种方法，所以希望它可以使用它。

解决方案是通过在标题中添加此元标记来强制 IE9 进入 IE8“文档模式”：
<meta http-equiv="X-UA-Compatible" content="IE=8">

现在字体在 Chrome 和 IE 中的显示方式完全相同，我的对齐问题也消失了。

【讨论】：