什么可能导致不同 PC 上的相同浏览器以不同方式呈现相同的 HTML？
我很困惑。 我和一个客户都在 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 中的字体和大小），以尝试重现该问题。 我更改了渲染样式（标准类型与清晰类型）。 没什么。 问题几乎肯定与字体无关。我必须看看是否可以获得对客户端计算机的更多访问权限来重现问题。
I'm stumped. A client and I are both running Firefox 3.0.12 on XP machines. We view the same page in the same browser on different machines and have different results. Note: All IE browsers are consistent on both of machines, and my FF 3.5.1 is consistent with my FF 3.0.12. (He does not have FF 3.5.x installed to compare with).
There is a 1 pixel difference that causes his header div (all images, no text) to wrap. Mine is fine. If I expand his header by 1 px (via Firebug css editing), it works.
So my question is what other variables are there that affect rendering??
I'm trying to think "outside the box" because it seems that it should work exactly the same.
We cleared the browser cache. I did a diff on the HTML source, and other than a javascript datetime stamp and a javascript tracking code var, the sources are identical.
I know this question would be helpful with source, but my client specifically does not want this page live on the internet yet. Also I verified the issue via a webex session. At first, I couldn't believe that we would have different results.
Anyone else come across something like this before? What should I check out / debug next?
Edit: There are a lot of suggestions pointing to fonts, but the header uses only images. Well, that's not completely true, there are divs that are part of a collapsible menu, but all of that is set to display:none for initially rendering, so I'm thinking that it's something else.
Edit 2: I've changed all sorts of fonts and sizes (both the system default font settings and within Firefox) on my computer to try to replicate the problem. I changed the rendering style (standard vs. clear type). Nada. The problem is almost definitely not font related. I'll have to see if I can get some more access to the client's computer to replicate the problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（12）
你们都使用完全相同的屏幕尺寸吗？ Firefox 是否尝试将字体缩放到查看页面的人的外观尺寸，或特定的像素数？
Are you both using the exact same screen size? Does firefox try to scale the fonts to the apparent size of the person viewing the page, or to a specific number of pixels?
我想到的一件事是安装的字体。 如果您有客户端没有的字体，则计算出的大小可能会存在 1 像素的差异。 FF 和 IE 的舍入方式可能不同，这可以解释为什么它们的行为不同。
One thing that comes to mind is installed fonts. If you have a font that the client doesn't there could be a 1 pixel difference in a computed size. FF and IE could be rounding differently, which would explain why they behave differently.
我基本上同意所有“字体专家”的观点，但如果这没有帮助，请尝试检查 HTTP 标头，因为某些标头可能是由服务器和客户端之间的代理等添加的。 但首先尝试字体建议...
祝你好运;)
I mostly agree with all the "font guys" further up, but if that doesn't help try checking the HTTP headers since some headers might be added by proxies and such between the server and your client. But try the font suggestions first...
Good luck ;)
不同的操作系统有不同的字体渲染引擎。 截然不同。 足以导致至少 1 像素的差异，具体取决于您如何设置 CSS。
DIfferent operating systems have different font rendering engines. Vastly different. More than enough to cause at least a 1 pixel difference, depending on how you set up your CSS.
我的第一个猜测与窗口有关，我不记得在 Firefox 中发生过这种情况，但无论如何尝试调整窗口大小。 也有可能实际上有 1px 宽的东西占据了该空间，例如隐藏框架或其他东西。 这些可能完全不合时宜，因为我不知道你实际上是如何制作这个东西的。
一种可能的解决方法是将其中一张图像显示为 div 的背景，而不是使用 img 标签，这会导致它被简单地截断而不是换行（如果它相差 1 像素）。
My first guess is something to do with the window, I don't recall this ever happening in firefox but try resizing the window anyway. It is also possible that there actually is something 1px wide taking up that space, such as a hidden frame or whatnot. These might be completely off the mark since I don't know how you actually made the thing.
A possible workaround is displaying one of the images as a background to a div instead of using an img tag, this'll cause it to simply be truncated instead of wrapping if it's 1px off.
我曾经看到过这个问题，结果发现用户缩放了页面，而缩放导致了数学舍入问题。 我无意中将页面缩放到 120%，他们只是正常的 100%。
I saw this problem once, and as it turned out the user had zoomed the page, and the zoom caused math rounding issues. I had inadvertently zoomed my page to 120%, they had just your normal 100%.
在浏览器的当前更新中，浏览器缩放设置采用系统的 dpi 设置。
在Windows 7中，设置dpi = 125%将产生浏览器窗口100%缩放的缩放效果。
所以，这与 HTML 无关。 也就是说，宽度 = 300px 的设置将在具有相同缩放设置但具有不同 dpi 设置的同一浏览器上产生不同大小的框。
Dpi = 125 % 将产生更大的盒子。
因此，如果您想降低缩放级别，请按 ctrl + - 缩小浏览器，或按照以下步骤降低系统的 dpi 设置
http:// /www.windows10update.com/2015/05/windows-10-tutorials-79-change-dpi-scaling-level-for-displays/
http://www.lawfirmsoftware.com/support/change_dpi_settings_windows_7.htm
With current update in browser, the browser zoom settings take the dpi settings of the system.
In windows 7, setting dpi = 125% will produce the zoom effect at 100% zoom of the browser window.
So, this is not related with HTML. i.e. to say settings of width = 300px will produce different size box on same browser with same zoom settings but with different dpi settings.
Dpi = 125 % will produce larger box.
So, if you want to reduce the zoom level, either zoom out the browser by pressing ctrl + -, or reduce the dpi settings of the system by following steps
http://www.windows10update.com/2015/05/windows-10-tutorials-79-change-dpi-scaling-level-for-displays/
http://www.lawfirmsoftware.com/support/change_dpi_settings_windows_7.htm
由于我们无法在自己的浏览器中查看该网站，因此我将使用以下过程来尝试解决问题：
开始逐步删除代码块，直到两个浏览器看起来一样。
无论您最后删除的哪个代码块使所有内容都完美排列（即使您从正文中丢失了一块），它就在罪魁祸首的附近。
既然您找到了罪魁祸首，请将所有内容都放在的代码返回。 首先开始摆弄字体。 更改字体、大小、删除文本等。直到您找到浏览器相同的条件。如果不是字体问题，请开始修改它的其他部分，直到您解决为止找到了与之匹配的条件。
完成此操作后，您将了解自己的问题并可以解决它。
完成
Since we can't take a look at the site in our own browsers, here is the process that I would use to try to nail down the issue:
Start removing code blocks piece by piece until the two browsers look the same.
Whichever block of code you last removed that made everything line up perfectly (even if you are missing a chunk from the body), that's near where the culprit is.
Since you've found the culprit, place all of the code back. Start messing around with the fonts first off. Change fonts, sizes, remove text, etc. until you can find a condition under which the browsers are the same. If it's not a font issue, start messing around with other parts of it until you've found the condition that matches it up.
Once you've done that, you will know your issue and you can work around it.
如果您使用的是 Firefox，请确保按 Ctrl-0 来默认缩放级别。
IF you're using Firefox make sure you hit Ctrl-0 to default the zoom level.
我知道我的 FF3.0 使一切看起来都与其他人的不同，因为我在“首选项”中将其设置为使用最小字体大小 16。我没有得到精细的印刷，我得到的是一堆清晰的文字。
此外，在 Mac 上，默认字体是无衬线字体，而在 Windows 上，一切都是衬线字体，这也可以进一步更改字体宽度和高度。
如果页面上的任何内容都用“em”或“ex”单位指定，则它们取决于字体大小。
I know my FF3.0 makes everything look different than other people's because I have it set in Preferences to use a minimum font size of 16. I dont get fine print, I get a pile of legible writing.
Also, being on a Mac, the default fonts are sans serif, whereas on windows everything is serif, which also can change the font widths and heights even further.
If anything on your page is specified with "em" or "ex" units, they are dependent on font size.
我会比较插件/附加组件。
I'd compare plugins/addons.
您的字体平滑设置怎么样 - 它们是否相同（无/抗锯齿/ClearType）？ 这可以改变给定文本的宽度，并且可能正是您正在寻找的。
How about your font smoothing settings - are they the same (none/antialias/ClearType)? That can change the width of a given text, and might just be what you're looking for.