为什么浏览器有时会渲染网站不好，有时会渲染良好？ （无需更换浏览器，无动态数据，仅刷新）
我有网站，通常看起来都很好，但有时有一个 div 位于错误的位置...现在，我认为原因是 AJAX（当 document.ready 加载欢迎文本时），但现在该脚本是已禁用，问题仍然存在。
目前，我只在最新的 Firefox 上注意到这一点。还有其他人有类似的问题吗？是否是免费托管的错误（也许某些数据包丢失了...？）（在 http://60free.ovh 上测试.org 和 http://www.000webhost.com/）
编辑： 我只讨论一种浏览器和两种不同的渲染结果。我知道这很奇怪......
编辑2： 看这个截图： 第一个不好的： http://img682.imageshack.us/img682/866/badxz.png , 好的，仅刷新页面后，（我不使用任何服务器端语言） http://img20.imageshack.us/img20/3992/goodtpxz.png
编辑3： 在网络开发人员插件中，我检查了禁用缓存
EDIT4： 这是页面 http://www.XYZ.eu/
I have website, usually all looks fine but sometimes one div is on the wrong place... For now, I thought reason is AJAX (when document.ready load welcome text), but now that script is disabled and problem still exist.
For now, I have noticed that only on latest Firefox. Anyone else had similar problem? Is it fault of free hosting (and maybe some packet is lost...?) (tested on http://60free.ovh.org and http://www.000webhost.com/)
EDIT:
I am talking about only ONE browsers and 2 diffrent results of rendering. I know it is very strange...
EDIT2:
Look at this screenshot:
First bad: http://img682.imageshack.us/img682/866/badxz.png,
and good one, after only refresh page, (I don't use any server side lang) http://img20.imageshack.us/img20/3992/goodtpxz.png
EDIT3:
In web-developer addons i have checked disable cache
EDIT4:
Here is page http://www.XYZ.eu/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
不，这不是免费托管的问题。浏览器只是以不同的方式呈现事物，这就是它的工作方式。您必须了解不同浏览器的怪癖，并学会处理它们。
在您充分了解 HTML 和 CSS 之前，您可能不应该接触 AJAX 甚至 JS。
编辑：您的澄清完全改变了这个问题的性质。在这种情况下，这听起来像是缓存问题。我会先尝试清除您的浏览器缓存。如果这不起作用，可能是服务器端缓存？您是否正在等待页面完全加载？随着页面继续加载，内容有时会移动，如果在完成之前挂起，可能会发生类似的情况。否则，我不太确定。
如果这些都不起作用，请更改设计：p 看起来您依赖于像素完美的测量，并且当没有足够的空间时，右侧的 div 会被推低。如果您可以避免这样的情况，您的页面对于细微的变化将会更加稳健。
再想一想，这可能是免费托管的副作用（但不是因为“丢失数据包”）。您的主机是否会在您的页面中注入任何广告或脚本？
No, it's not a problem of free hosting. Browsers simply render things differently, that's the way it works. You have to learn the quirks of the different browsers, and learn to deal with them.
You probably shouldn't be touching AJAX or even JS until you have a solid understanding of HTML and CSS.
Edit: Your clarifications completely change the nature of this question. In that case, it sounds like a caching issue. I'd try clearing your browser cache first. If that doesn't work, it could be some server-side caching? Are you waiting for the page to fully load? Stuff sometimes gets moved around as the page continues to load, if it hangs before its done, something like this might occur. Otherwise, I'm not really sure.
If none of that works, change the design :p Looks like you're relying on pixel-perfect measurements, and that right div is getting pushed down when it doesn't have enough room. If you can avoid scenarios like this, your page will be a little more robust to subtle changes.
On second thought, it could be a side-effect of free hosting (but not because of "lost packets"). Does your host inject any ads or scripts into your page?
看看你的截图，我认为最可能的原因是 IE 和 FF 中 div 的默认边距不同。
处理 Firefox 问题时，请使用 Firebug 实时编辑 CSS，并在执行时查看更改。
尝试设置
div {margin:0;padding:0;}一分钟，看看是否会变得更好。Looking at your screenshots I believe the most likely reason is a difference in the default margin of divs in IE and FF.
When dealing with firefox problems, use Firebug to edit the CSS live and see the changes when you do them.
Try setting
div {margin:0;padding:0;}for a minute to see if that changes things for the better.问题是浏览器不遵循 CSS 标准。某些浏览器（例如 Firefox、Chrome 和 Safari）非常接近标准兼容。其他浏览器（例如 Internet Explorer）根本不符合标准。
您唯一的选择就是尝试不同的方法，直到它适用于所有浏览器。您能否向我们提供 HTML 和 CSS 示例，以便我们为您提供帮助？
The problem is that browsers do not follow CSS standards. Certain browsers like Firefox, Chrome and Safari are pretty close to being standard compliant. Others such as Internet Explorer are not at all standard compliant.
The only option you have is to try different things until it works for every browsers. Could you give us a sample of your HTML and CSS so we can help you with that?
Firefox 在 HTML 和 CSS 2.1 渲染方面做得非常好（请参阅 Acid2 测试）所以（无意冒犯）我宁愿连累你的CSS。
Firefox does a pretty good job with HTML and CSS 2.1 rendering (see the Acid2 test) so (no offense here) I'd rather incriminate your CSS.
大多数浏览器渲染页面的方式不同的原因在于它们的渲染引擎。例如，Safari 中有 WebKit，Mozilla 中有 Gecko。这两种渲染引擎根据其构建方式的不同，期望和处理的方式也不同。
但是，在您的情况下，您的浏览器似乎与缓存和服务器端内容混淆了。就像其他人所说的那样，尝试为初学者清除缓存，然后如果没有帮助，请深入研究源代码。
The reason most browsers render pages differently comes down to their rendering engine. For example, we have WebKit in Safari and Gecko in Mozilla. Both of these rendering engines expect and handle things differently based on how they where built.
However in your situation, it seems like your browser is getting confused with the cache and the server side content. Like others stated, trying clearing your cache for starters, then dig into the Source Code if that doesn't help.
检查每个 Firefox 副本中设置的字体大小。如果 DIV 的边距或宽度以 em 为单位，则它们与浏览器中设置的字体大小相关。当 DIV 渲染异常时，尝试减小 FF 字体大小，假设这就是问题所在，它应该会弹回原位。
Check the font size set in each copy of Firefox. If margins or widths of DIVs are in ems, then these are relative to the font size set in the browser. Try decreasing the FF font size when the DIV renders strangely, it should snap back into place, assuming this is what's going wrong.
听起来像是缓存问题。也许您试图最大化与浮动元素一起使用的宽度。
有时，当您更改 css 文件并且浏览器不认为重新下载它时，可能会发生这种情况，因为文件名未更改且文件大小未更改到足以使浏览器重新下载它。
有关如何清除缓存的更多信息，请访问 http://kb.iu.edu/data /ahic.html
It sounds like a caching problem. Perhaps you were attempting to maximize the width used along with floated elements.
Sometimes this kind of thing can happen when you change a css file and your browser doesn't think to re-download it because the filename hasn't changed and the filesize hasn't changed enough to make your browser re-download it.
More information on how to clear your cache can be found http://kb.iu.edu/data/ahic.html
您是否在加载之间更改了浏览器窗口的宽度？如果这样做，浮动元素的位置可能会受到影响。
Did you change the width of the browser window between loads? The positioning of floated elements could have been affected if you did.
Div 在 FF 和 IE 中通常是不同的，我经常遇到这个问题，并且需要花费很多很多时间来解决这个问题。
认为可以帮助你：
IE和FF都有一个DEV工具栏，在里面你可以看到很多关于DIV-Conatainers的信息
让我的 div 不好的一件事是浮动、高度和宽度 - 当你在另一个 div 中忘记其中一个时，你的“问题”-div 可能因此而出错
给我们你的 div 和你的 CSS，我们可以找出答案更多
我在 Opera 中看到了一些非常有趣的事情：当页面加载时，左侧站点上的菜单瞬间完全打开（所有约 10 个链接）。有没有可能，在 FF 中，此链接的位置将被计算一次，该位置大于允许的菜单 div 并导致“关于”框架变得愚蠢？！ （只是一个想法）——
Div's are often different in FF and IE, I had the problem very often and need many many time to spent on this.
Thinks that can help you:
IE and FF have both a DEV-Toolbar, within that you can see very much information about DIV-Conatainers
One thing that make my div's bad is the float, height and width - when you forget one of these in another div, your "problem"-div maybe is wrong because of that
Give us your div and your CSS and we can find out more
I see some very interesting thing in Opera: When the page loaded, you menu on the left site is for a single moment completly open (all ~10 links). Can it be, that in FF the place for this links will be calculated once, that is bigger than the menu-div allowed and causes the "About"-frame to be foolish?! (Only an Idea) –
Firefox 存在（目前几乎已经存在——动态渲染现在很难实现）所谓的 Slashdot CSS bug。有时会发生的情况是，浏览器在其动态内容完全加载以进行预渲染之前要求某些内容的大小。在这种情况下，它会根据它所拥有的内容进行渲染。还不错，但问题在于：当内容完全加载时，浏览器不会重新计算该值，从而导致偶尔出现无法在本地复制的糟糕渲染。
编辑：这是另一个描述： http: //sourceforge.net/tracker/index.php?func=detail&aid=2808234&group_id=4421&atid=104421
Firefox has (pretty much had at this point--dynamic rendering is hard to reach now) what is known as the Slashdot CSS bug. What can sometimes happen is the browser demands the size of something before its dynamic content is fully loaded for pre-rendering. In that case it renders based on what it has. Not too bad but here's the kicker: When the content is fully loaded the browser does not recalculate the value causing occasional terrible rendering that cannot be replicated locally.
EDIT: here's another description: http://sourceforge.net/tracker/index.php?func=detail&aid=2808234&group_id=4421&atid=104421