0

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

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

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

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

有什么我能做的吗？

4

2 回答 2

0

浏览器有自己的样式表。您可以使用 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 所需的结果。

于 2013-02-01T19:46:02.483 回答
0

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

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

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

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

于 2013-02-01T22:42:52.160 回答