internet-explorer - 什么可能导致不同 PC 上的相同浏览器以不同方式呈现相同的 HTML？

Question

我难住了。我和一个客户端都在 XP 机器上运行 Firefox 3.0.12。我们在不同的机器上用同一个浏览器查看同一个页面，得到不同的结果。注意：两台机器所有IE浏览器一致，我的FF 3.5.1和我的FF 3.0.12一致。（他没有安装 FF 3.5.x 来比较）。

有 1 个像素的差异导致他的标题 div （所有图像，没有文本）换行。我的很好。如果我将他的标题扩大 1 px（通过 Firebug css 编辑），它就可以工作。

所以我的问题是还有哪些其他变量会影响渲染？

我试图“跳出框框”思考，因为它似乎应该完全一样。

我们清除了浏览器缓存。我对 HTML 源进行了比较，除了 javascript 日期时间戳和 javascript 跟踪代码 var 之外，源是相同的。

我知道这个问题会对来源有所帮助，但我的客户特别不希望这个页面出现在互联网上。我还通过 webex 会话验证了该问题。起初，我不敢相信我们会有不同的结果。

其他人以前遇到过这样的事情吗？接下来我应该检查/调试什么？

编辑：有很多关于字体的建议，但标题只使用图像。好吧，这并不完全正确，有些 div 是可折叠菜单的一部分，但所有这些都设置display:none为初始渲染，所以我认为它是另一回事。

编辑 2：我已经更改了计算机上的各种字体和大小（系统默认字体设置和 Firefox 中的）以尝试复制问题。我改变了渲染风格（标准与清晰类型）。纳达。问题几乎肯定与字体无关。我将不得不看看我是否可以获得对客户计算机的更多访问权限以复制问题。

score 5 · Accepted Answer

由于我们无法在自己的浏览器中查看该站点，因此我将使用以下过程来确定问题：

开始一块一块地删除代码块，直到两个浏览器看起来一样。
无论您上次删除的哪个代码块使所有内容都完美排列（即使您从正文中丢失了一块），这都靠近罪魁祸首。
既然你找到了罪魁祸首，就把所有的代码放回去。首先开始弄乱字体。更改字体、大小、删除文本等，直到找到浏览器相同的条件。如果不是字体问题，请开始处理它的其他部分，直到找到与之匹配的条件。
一旦你这样做了，你就会知道你的问题，你可以解决它。

score 5 · Accepted Answer

5

如果您使用的是 Firefox，请确保您按 Ctrl-0 以默认缩放级别。

于 2009-08-03T22:02:52.063 回答

score 3 · Accepted Answer

我知道我的 FF3.0 让一切看起来都与其他人不同，因为我在首选项中设置了使用最小字体大小 16。我没有得到精美的印刷品，我得到了一堆清晰的文字。

此外，在 Mac 上，默认字体是无衬线字体，而在 Windows 上，一切都是衬线字体，这也可以进一步改变字体的宽度和高度。

如果您页面上的任何内容使用“em”或“ex”单位指定，则它们取决于字体大小。

score 2 · Accepted Answer

2

我会比较插件/插件。

于 2009-08-03T21:55:12.217 回答

score 2 · Accepted Answer

您的字体平滑设置如何 - 它们是否相同（无/抗锯齿/ClearType）？这可以改变给定文本的宽度，并且可能正是您正在寻找的。

score 2 · Accepted Answer

你们都使用完全相同的屏幕尺寸吗？Firefox 是否尝试将字体缩放到查看页面的人的外观大小，或特定数量的像素？

score 1 · Accepted Answer

想到的一件事是安装的字体。如果您有客户端没有的字体，则计算大小可能会有 1 个像素的差异。FF 和 IE 的舍入可能不同，这可以解释为什么它们的行为不同。

score 1 · Accepted Answer

我大多同意所有“字体专家”的观点，但如果这无助于尝试检查 HTTP 标头，因为代理可能会在服务器和您的客户端之间添加一些标头等。但请先尝试字体建议...

祝你好运 ;）

score 0 · Accepted Answer

不同的操作系统有不同的字体渲染引擎。大不相同。足以导致至少 1 个像素的差异，具体取决于您如何设置 CSS。

score 0 · Accepted Answer

我的第一个猜测是与窗口有关，我不记得在 Firefox 中发生过这种情况，但无论如何尝试调整窗口大小。也有可能实际上有 1px 宽的东西占用了该空间，例如隐藏的框架或诸如此类的东西。这些可能完全不合时宜，因为我不知道您实际上是如何制作的。

一种可能的解决方法是将其中一个图像显示为 div 的背景，而不是使用 img 标签，这将导致它被简单地截断而不是在 1px 关闭时换行。

score 0 · Accepted Answer

我曾经看到过这个问题，结果发现用户已经缩放了页面，并且缩放导致了数学舍入问题。我无意中将我的页面缩放到 120%，他们只是你正常的 100%。

score 0 · Accepted Answer

随着浏览器的当前更新，浏览器缩放设置采用系统的 dpi 设置。

在 Windows 7 中，设置 dpi = 125% 将在浏览器窗口的 100% 缩放时产生缩放效果。

因此，这与 HTML 无关。也就是说，宽度 = 300px 的设置将在具有相同缩放设置但具有不同 dpi 设置的同一浏览器上产生不同大小的框。

Dpi = 125 % 会产生更大的盒子。

所以，如果你想降低缩放级别，要么通过按 ctrl + - 缩小浏览器，要么通过以下步骤降低系统的 dpi 设置

12 回答 12