IE9 字母间距问题

Posted 2023-02-22

技术标签:

【中文标题】IE9 字母间距问题【英文标题】：IE9 letter-spacing problem 【发布时间】：2011-07-27 14:21:10 【问题描述】：

我有一个可以在 FF (3x, 4x)、Chrome、IE (6, 7, 8) 中呈现的页面。

在 IE9 上测试时，文本更宽。调查这个问题，似乎文本实际上是用比其他浏览器更间隔的字母呈现的。

当将字母间距更改为 -0.6px 时，文本呈现正常，类似于其他浏览器。此外，当将渲染模式更改为“兼容性视图”时，页面看起来还不错。

你知道是什么导致了渲染模式的变化吗？

我使用条件注释“解决”了这个问题，但我对此不太满意

<!--[if IE 9]>
<style>
    * letter-spacing: -0.6px;
</style>
<![endif]-->

有没有其他方法可以解决这个问题？

编辑

我在不同的机器和不同的浏览器上做了几张截图，结果可以看到here

如您所见，在使用不同浏览器的不同机器上，结果是相同的。唯一呈现不同的是标准模式下的 IE9。源页面是

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
    body margin:0;padding:0;
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>

【问题讨论】：

你能举一个活生生的例子吗？这很可能取决于字体细节。你用的是什么字体？没有回答您的问题，只是想指出 IE 7 及以下版本将字母间距舍入到最接近的整个像素值。字母间距在排版中称为“字距调整”。 IE9 确实从 IE8 改变了它的字体渲染引擎。渲染取决于屏幕 dpi 和字体大小、抗锯齿量以及是否使用 ClearType。因此，请注意仅从您自己的屏幕上进行判断。它在其他屏幕上看起来会有所不同。 ***.com/questions/5427315/… ***.com/questions/5558773/… 你用reset css吗？因为解决并更改一些默认设置（这是建议 - 不确定......） 【参考方案1】：

我一直发现，跨浏览器设置字体大小最有用的方法是使用 em 而不是 px 值。

我倾向于在 CSS 的 body 标签中设置基点：

font-size: 62.5%

然后，每当我想设置字体大小时，我都会使用 em 值，例如：

font-size: 1.1em;

这相当于 11 像素。我发现的优点是它在浏览器之间呈现更加一致，并且使用浏览器调整大小控件可以更好地调整大小。

试一试 - 我认为它应该可以解决您的问题。

谢谢 nathj07

【讨论】：

【参考方案2】：

由于某种原因，这在 IE8 中也发生在我身上。减小字体大小或设置字母间距都不能解决问题。

在另一个线程中，我看到这可能与字体有关。不幸的是，我还没有找到解决方案，但是一旦我找到它，我会在这里发布。目前可能对您没有帮助，但可能对以后访问此问题的人有所帮助。

【讨论】：

如果您能提供指向您引用的文章的链接会更有帮助。请务必回来发布更新。好的。很抱歉没有提供它们。我在这些问题中发现了类似的问题：***.com/questions/13830970/… 和***.com/questions/2690815/…。我设法通过后一个问题的第一个答案解决了这个问题，即重新生成字体并检查选项删除字距调整。当然，我看不到你的链接，看看问题是否和我的一样，但我希望这会有所帮助。【参考方案3】：

尝试为整个文档设置letter-spacing值，这样它在IE和FF中显示相同。

【讨论】：

【参考方案4】：

在 Internet Explorer 8 和 Firefox 上试试这个：

letter-spacing:0.49px;
letter-spacing:0.88px !ie;

MSIE 会将第一个字母间距设置为 0px 并忽略第二条规则。 Firefox 将读取第二条规则并使用它而不是第一条规则。

然后，作为补偿，您可以使用相同的技巧并在 MSIE 中为您的文本添加更多的水平填充，而不是您在 Firefox 中提供的内容。

当然，用其他浏览器做进一步的测试！

【讨论】：

【参考方案5】：

恐怕我这台机器上没有 IE9 - 明天会在有的 PC 上再试一次，但我立即想到的是 w3c 验证器说你的 HTML 无效。

它不喜欢您的文本直接在 BODY 中而不在其他容器中的事实。我只是想知道这是否是问题所在？也许其他浏览器正在代表您“更正”并假设一个段落容器。

如果将文本放在段落或 DIV 中，外观会改变吗？

【讨论】：

【参考方案6】：

距您提出这个问题已有七个月了，现在需要考虑的另一件事是，从 2011 年 6 月开始，FireFox 的第 5 版开始了快速发布计划。它们现在升级到第 8 版，作为快速测试，我看到 FireFox 的第 7 版和第 8 版都使用 IE9 呈现几乎像素完美的文本。相比之下，Chrome 似乎“被压扁”了，因为字距更紧，而且 Chrome 中的清晰类型渲染（在我看来）比 IE9 和 FF7/8 都更苛刻。

无法保证跨浏览器匹配字体渲染，更不用说跨平台了。我查看的所有浏览器都默认为（在 Windows 上）Times New Roman，“正常”显示的 16pt 文本。如果您的应用程序需要将文本呈现到与所有用户、所有浏览器、所有平台匹配的级别，则将其呈现为图像并缓存它。

【讨论】：

【参考方案7】：

您可以参考微软的文章。可能是问题，因为Text Rendering

【讨论】：

【参考方案8】：

humeniuc

您确定您使用的是默认字体还是其他字体？这可能会导致问题

【讨论】：

【参考方案9】：

这可能与向上/向下舍入有关。使用十分之一像素是一件奇怪的事情，因为除非您知道四舍五入将如何进行，否则您不能在屏幕上获得少于一个完整像素。无论如何，你不能依靠 IE 来做任何事情。

【讨论】：