Question

我在FF（3x，4x），Chrome，IE（6,7,8）中有一个呈现正常的页面。

在IE9上测试时，文本更宽。调查问题看来，文本实际上呈现的字母比其他文字更加宽松。

当将字母间距更改为-0.6px时，文本呈现正常，与其他浏览器类似。此外，当渲染模式更改为“兼容性视图”时，页面看起来很好。

你知道是什么原因造成了渲染模式的变化吗？

我使用条件评论“解决”了这个问题，但我对此并不高兴

<!--[if IE 9]>
<style>
    * {letter-spacing: -0.6px;}
</style>
<![endif]-->

是否存在其他方法来解决问题？

修改的

我在不同的机器和不同的浏览器上制作了一些屏幕截图，结果可以看到here

如您所见，在具有不同浏览器的不同计算机上，结果是相同的。唯一呈现不同的是标准模式下的IE9。源页面是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
    body {margin:0;padding:0;}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>

Answer 1

它可能与向上/向下舍入有关。使用十分之一px是一件很奇怪的事情，因为除非你知道舍入将如何进行，否则你不能在屏幕上获得少于一个像素。无论如何，你不能依靠IE来做任何事情。

Answer 2

尝试使用Internet Explorer 8和Firefox：

letter-spacing:0.49px;
letter-spacing:0.88px !ie;

MSIE将第一个字母间距置于0px并忽略第二个规则。 Firefox将读取第二条规则并使用它而不是第一条规则。

然后，为了补偿，您可以使用相同的技巧，并在MSIE中为您的文本添加更多水平填充，即您在Firefox中提供的内容。

当然，请与其他浏览器进行进一步测试！

Answer 3

现在要考虑的另一件事是，自从你提出这个问题已经七个月了，从2011年6月开始，FireFox的第5版开始了快速发布时间表。它们现在已达到版本8并且作为快速测试，我看到FireFox的版本7和8都使用IE9渲染文本几乎完全像素。相比之下，Chrome看起来“压扁”，因为字距更加紧凑，Chrome中的清晰类型渲染（在我看来）比IE9和FF7 / 8都要严格。

您无法保证跨浏览器匹配的字体呈现，更不用说跨平台了。我看过的所有浏览器默认为（在Windows上）Times New Roman，16pt文本用于“正常”显示。如果您的应用程序需要将文本呈现为所有用户，所有浏览器，所有平台的匹配级别，则将其呈现为图像并对其进行缓存。

Answer 4

尝试为整个文档牢固地设置letter-spacing值，因此它将在IE和FF中显示相同的内容。

Answer 5

出于某种原因，IE8中也出现了这种情况。减小字体大小或设置字母间距都不能解决问题。

在另一个帖子中，我看到这可能与font-face有关。不幸的是我还没有找到解决方案，但是一旦找到它，我就会在这里发布。目前可能对您没有帮助，但它可能会帮助稍后访问此问题的人。

Answer 6

humeniuc

您确定使用默认字体或使用其他字体吗？这可能导致问题

Answer 7

您可以参考Microsoft的文章。可能是问题，因为Text Rendering

Answer 8

我一直发现在浏览器中设置字体大小最有用的方法是使用em而不是px值。

我倾向于在CSS中设置body标签中的基点：

font-size: 62.5%

然后，每当我想设置字体大小时，我都会使用em值，例如：

font-size: 1.1em;

这相当于11px。我发现它的优点是它可以在浏览器中更加一致地呈现，并且使用浏览器调整大小控件也可以更好地调整大小。

尝试一下 - 我认为它应该可以解决你的问题。

由于 nathj07

Answer 9

害怕我在这台机器上没有IE9 - 明天会再次尝试在PC上查看，但我的想法是w3c验证器说你的HTML无效。

它不喜欢你的文字直接在BODY中并且不在其他容器中的事实。我只是想知道这是不是问题？也许其他浏览器代表你“纠正”并假设一个段落容器。

如果将文本放在段落或DIV中，外观是否会改变？

IE9字母间距问题

9 个答案: