为什么与新浏览器相比，旧 IE 版本中的字母间距要宽得多？答案

【问题标题】：Why is the letter spacing so much wider in old IE versions compared to newer browsers?为什么与新浏览器相比，旧 IE 版本中的字母间距要宽得多？
【发布时间】：2013-02-02 06:42:52
【问题描述】：

我正在跨浏览器测试我的开发站点，在看到朋友的一些 IE8 屏幕截图后，我很生气地看到我的许多标题和段落溢出到新行上，而它们在 FF、IE9 和 Chrome 中看起来都非常相似.

特别是 IE8，与这些较新的浏览器相比，字母间距似乎很宽。有什么办法可以让它们彼此一致吗？

这是一个很好的演示来看看它：http://dev.enterf1.com/british-grand-prix/tickets.php

H2 设置为 -1px，在新浏览器中看起来很棒。如果我将它设置为 -2px，它在 IE8 中看起来会好很多，但在较新的浏览器中会被压扁。

我能做什么？

【问题讨论】：

标签： css internet-explorer-8 cross-browser

【解决方案1】：

浏览器有自己的样式表。您可以使用 CSS 规范器或重置器来平衡竞争环境，以便所有浏览器按照您的意图呈现您的样式。 IE8 的基本风格显然与适合您需要的其他风格不同。

查看http://necolas.github.com/normalize.css/

如果没有别的，你可以使用条件注释在body上为ie8设置一个类，然后使用专门针对该类的CSS规则。考虑以下几点：

<!--[if IE 9]><body class="ie9 ie"><![endif]-->
<!--[if IE 8]><body class="ie8 ie"><![endif]-->
<!--[if IE 7]><body class="ie7 ie"><![endif]-->
<!--[if lte IE 6]><body class="ie6 ie"><![endif]-->
<![if !IE]><body><![endif]>

然后考虑以下 CSS：

h2 {
    font-size : 14px;
}

.ie8 h2 {
    font-size : 12px;
}

这只会为您提供 ie8 所需的结果。

【讨论】：

我试了一下，但不幸的是，我的字母间距在 IE8 中仍然更宽，真是个糟糕的家伙！

【解决方案2】：

可能它使用了不同的字体。例如，也许您的 Win7/IE9 系统正在使用 Segoe 字体，但 WinXP/IE8 不会安装该字体，而是会恢复为 Ariel 或 Verdana。

这很容易解释差异 - 这些字体可能看起来相似，但它们之间的文本宽度可能存在显着差异。

您可以进行调整以尝试解决它，但请记住，其他操作系统和平台的用户也可能安装了不同的字体，并且也可能看到不同的东西。不要忘记在您想要支持的平板电脑和其他设备上进行测试。它们几乎肯定会以不同的方式呈现给您的桌面浏览器。

所有这一切意味着依赖与您在自己的浏览器中看到的字体大小完全相同可能是个坏主意。更好的建议是让元素空间以稍大的字体适应文本，或者允许它们根据需要调整大小。无论哪种方式，自适应布局可能是这里的方法，而不是试图强迫事物像素完美。

【讨论】：