Css 为什么旧IE版本的字母间距比新浏览器的要大得多?

Css 为什么旧IE版本的字母间距比新浏览器的要大得多?,css,internet-explorer-8,cross-browser,Css,Internet Explorer 8,Cross Browser,我正在跨浏览器测试我的开发网站,在看到一位朋友的一些IE8屏幕截图后,我很恼火地看到我的许多标题和段落都出现在了新的行上,而它们在FF、IE9和Chrome中看起来都很相似 特别是IE8,与这些较新的浏览器相比,字母间距似乎很宽。我能做些什么使他们彼此一致吗 这是一个很好的演示: H2设置为-1px,在新浏览器中看起来很棒。如果我将它设置为-2px,它在IE8中看起来会更好,但在较新的浏览器中会被挤压 我能做什么吗?浏览器有自己的样式表。您可以使用CSS规范化器或重置器来调整游戏环境,以便所有浏

我正在跨浏览器测试我的开发网站,在看到一位朋友的一些IE8屏幕截图后,我很恼火地看到我的许多标题和段落都出现在了新的行上,而它们在FF、IE9和Chrome中看起来都很相似

特别是IE8,与这些较新的浏览器相比,字母间距似乎很宽。我能做些什么使他们彼此一致吗

这是一个很好的演示:

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


我能做什么吗?

浏览器有自己的样式表。您可以使用CSS规范化器或重置器来调整游戏环境,以便所有浏览器按照您的意愿呈现您的样式。IE8显然有一个不同的基本风格比其他适合你的需要

退房

如果没有其他内容,您可以使用条件注释在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]>

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

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

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

你可以做一些调整来解决这个问题,但要记住,其他操作系统和平台的用户也可能安装了不同的字体,也可能会有不同的看法。别忘了在平板电脑和其他你想支持的设备上测试它。它们几乎肯定会以不同的方式呈现类似于桌面浏览器的内容


所有这些都意味着,依赖于字体大小与您在自己的浏览器中看到的完全一致可能是一个坏主意。更好的建议是,要么允许元素空间使用稍微大一点的字体来容纳文本,要么允许元素根据需要调整大小。不管是哪种方式,在这里,自适应布局可能是一种方式,而不是试图强迫事物达到像素完美。

我尝试了一下,但我的字母间距在IE8中仍然更宽。不幸的是,这是一个错误!
h2 {
    font-size : 14px;
}

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