是什么导致不同PC上的同一浏览器以不同方式呈现相同的HTML?

时间:2009-08-03 21:47:58

标签: internet-explorer firefox layout pixel

我很难过。我和客户都在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内)以尝试复制问题。我改变了渲染风格(标准与清晰类型)。纳达。 问题几乎肯定不是与字体相关的。我必须看看是否可以获得更多访问客户端计算机的权限来复制问题。

12 个答案:

答案 0 :(得分:5)

由于我们无法在自己的浏览器中查看该网站,因此以下是我将尝试解决该问题的过程:

  • 逐个删除代码块,直到两个浏览器看起来一样。

  • 你最后删除的代码块使得一切都完美排列(即使你遗漏了身体的一块),就在罪魁祸首附近。

  • 由于您找到了罪魁祸首,请将所有代码放回原处。首先开始乱搞字体。更改字体,大小,删除文字等,直到找到浏览器相同的条件。如果不是字体问题,请开始搞乱它的其他部分,直到你发现它为止。找到匹配它的条件。

  • 完成后,您就会知道自己的问题并可以解决它。

答案 1 :(得分:5)

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

答案 2 :(得分:3)

我知道我的FF3.0让一切都看起来与其他人不同,因为我在偏好设置中设置了最小字体大小为16.我没有得到精美的印刷,我得到了一堆清晰的写作。

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

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

答案 3 :(得分:2)

我会比较插件/插件。

答案 4 :(得分:2)

字体平滑设置如何 - 它们是否相同(无/抗锯齿/ ClearType)?这可以改变给定文本的宽度,可能只是你正在寻找的东西。

答案 5 :(得分:2)

您是否都使用完全相同的屏幕尺寸? firefox是否尝试将字体缩放到查看页面的人的表观大小或特定像素数?

答案 6 :(得分:1)

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

答案 7 :(得分:1)

我主要同意所有“字体人”,但如果这样做无助于尝试检查HTTP标头,因为某些标头可能是由服务器和客户端之间的代理添加的。但首先尝试字体建议......

祝你好运;)

答案 8 :(得分:0)

不同的操作系统有不同的字体渲染引擎。与众不同。足以导致至少1个像素的差异,具体取决于您设置CSS的方式。

答案 9 :(得分:0)

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

一种可能的解决方法是将其中一个图像显示为div的背景而不是使用img标记,这将导致它被简单地截断而不是包装,如果它是1px关闭。

答案 10 :(得分:0)

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

答案 11 :(得分:0)

使用浏览器中的当前更新,浏览器缩放设置采用系统的dpi设置。

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

因此,这与HTML无关。也就是说宽度= 300px的设置会在同一个浏览器上生成不同大小的框,但设置相同,但dpi设置不同。

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

因此,如果您想降低缩放级别,请按ctrl + - 缩小浏览器,或按照以下步骤缩小系统的dpi设置

  1. 对于Windows 10 http://www.windows10update.com/2015/05/windows-10-tutorials-79-change-dpi-scaling-level-for-displays/
  2. 对于Windows 7 http://www.lawfirmsoftware.com/support/change_dpi_settings_windows_7.htm