Question

我正在使用这种体型

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    margin: 0;
}

但是，在IE7和IE8中，字体小于Firefox。可能是什么问题呢？

Answer 1

不 - 没错。浏览器的呈现方式不同。

如果您需要，请尝试搜索“Internet Explorer特定的CSS”，您应该找到许多示例，说明如何调整CSS的某些块以特定于Internet Explorer - 例如，您可以指定字体有点如果在IEx中则更大。

Answer 2

您需要的是CSS重置样式表，例如YUI CSS Reset和CSS Fonts。

基本上，这些CSS样式是您页面中出现的第一个样式，它们旨在以相同的方式在所有浏览器中显示相同的元素。

使用它们确实是一种很好的做法，它们可以节省大量时间，让每个浏览器自己调整一下。

为了澄清，YUI字体的作用是为字体分配百分比值。正如您可以看到阅读this文章，使用字体的px值可能会导致它们在不同浏览器之间呈现不一致（即使在相同的操作系统上）。这是因为每个浏览器都有不同的处理字体的方式。

使用百分比值是一种更好的大小字体方式，并保持浏览器缩放支持。

在重置YUI字体后，要从那里正确调整字体大小，您可以参考以下table来使用正确的百分比值。

您可能还想查看this问题。

Answer 3

我使用样式表样本设置了一个测试页面，但我发现Firefox和IE8之间没有任何大小差异。也许还有其他CSS规则导致您的特定问题？

我通常使用ems来规范化字体大小并且没有任何问题。 IE6不允许用户重新调整以像素为单位的文本大小，因此我们放弃了使用px。

所有浏览器中“中”文字的默认大小为16px。将此尺寸调整62.5％可将尺寸降至10px。（16 * 0.625 = 10）这降低了计算字体大小的数学复杂性。现在你可以思考以像素为单位但是在ems中设置大小：1em是10px，0.8em是8px，1.6em是16px等。请参阅http://clagnut.com/blog/348/。

<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
    font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0;
}

#content {
    font-size: 1.2em;
}
</style>
</head>

<body>
    <div id="content">
        <h1>Test Page</h1>

        <p>Duis commodo hendrerit arcu, nec tincidunt est malesuada vel. Nunc
        sodales nisl vel dui mattis pulvinar. Vestibulum vel malesuada augue.
        Aliquam vel tristique sem. Sed at leo et felis ultrices facilisis. In
        hac habitasse platea dictumst. Fusce id sapien eros. Nulla facilisi.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.</p>
    </div>
</body>
</html>

暂且不说：您还可以考虑使用line-height属性来调整段落中行之间的间距。线条之间的间距越宽，文本就越容易阅读。

IE和FireFox中的CSS字体变化问题

3 个答案: