18

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

在 IE9 上测试时，文本更宽。调查这个问题，似乎文本实际上是用比其他浏览器更间隔的字母呈现的。

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

你知道是什么导致了渲染模式的变化吗？

我使用条件注释“解决”了这个问题，但我对此并不满意

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

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

编辑

我在不同的机器和不同的浏览器上做了一些截图，结果可以在这里看到

如您所见，在具有不同浏览器的不同机器上，结果是相同的。唯一呈现不同的是标准模式下的 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>
4

9 回答 9

4

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

于 2011-04-01T12:56:37.060 回答
4

试试这个，因为它适用于 Internet Explorer 8 和 Firefox：

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

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

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

当然，用其他浏览器做进一步的测试！

于 2012-01-01T18:21:11.907 回答
3

距您提出这个问题已有七个月了，现在要考虑的另一件事是，从 2011 年 6 月开始，FireFox 的第 5 版开始了快速发布计划。它们现在升级到第 8 版，作为快速测试，我看到 FireFox 的第 7 版和第 8 版都使用 IE9 呈现几乎像素完美的文本。相比之下，Chrome 似乎“被压扁了”，因为字距更紧，而且 Chrome 中的清晰类型渲染（在我看来）比 IE9 和 FF7/8 都更苛刻。

你不能保证跨浏览器匹配的字体渲染，更不用说跨平台了。我查看的所有浏览器都默认为（在 Windows 上）Times New Roman，“正常”显示的 16pt 文本。如果您的应用程序需要将文本呈现到与所有用户、所有浏览器、所有平台匹配的级别，则将其呈现为图像并缓存它。

于 2011-11-16T07:13:49.013 回答
1

尝试为整个文档设置字母间距值，使其在 IE 和 FF 中显示相同。

于 2012-10-19T17:44:20.417 回答
1

出于某种原因，这也在 IE8 中发生在我身上。减小字体大小或设置字母间距都不能解决问题。

在另一个线程中，我看到这可能与字体有关。不幸的是我还没有找到解决方案，但是一旦我找到它，我会在这里发布。目前可能对您没有帮助，但它可能会帮助以后访问此问题的人。

于 2013-01-23T13:18:04.637 回答
0

胡梅纽克

您确定您使用的是默认字体还是使用了一些不同的字体？这可能会导致问题

于 2011-07-23T06:56:54.447 回答
0

I have always found that the most useful way to set font size across browsers is using em not px values.

I tend to set up the base point in the body tag in CSS:

font-size: 62.5%

Then whenever I wish to set a font size I use an em value such as:

font-size: 1.1em;

This equates to 11px. The advantage I have found is that it renders more consistently across browsers and also resizes better using the browser resize controls.

Give this a try - I think it should solve your problem.

Thanks nathj07

于 2011-11-21T16:23:18.203 回答
0

你可以参考微软的文章。可能是问题，因为文本渲染

于 2011-11-15T13:44:12.447 回答
0

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

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

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

于 2011-11-21T21:02:25.243 回答