Question

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

特别是IE8，与这些较新的浏览器相比，字母间距看起来很宽。我能做些什么来让它们彼此一致吗？

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

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

我能做什么？

Answer 1

浏览器有自己的样式表。您可以使用CSS规范化器或重置器来平衡游戏区域，以便所有浏览器呈现您打算的样式。 IE8显然与其他适合您需求的基本风格不同。

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

如果没有别的，你可以使用条件注释在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提供所需的结果。

Answer 2

可能它使用的是另一种字体。也许你的Win7 / IE9系统正在使用Segoe字体，但WinXP / IE8不会安装该字体，而是转而使用Ariel或Verdana。

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

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

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

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

2 个答案:

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

2 个答案:

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