问题
The is a pretty weird bug at least in my experience.
I have made a test version of the site so you can see it live here.
Steps to reproduce:
Enter the site, yo see #thelist just fine as it should:
The problem comes when when you do a simple refresh I'm on a windows machine so Ctrl+R or F5.
Now #thelist will go change it's position:
My main problem with fixing this is that when I try to inspect the element, it goes right back to it's correct position...
Note also that if you do a hard refresh Ctrl+Shift+R or Ctrl+F5 then the element will go back to it's correct position.
How is this possible, what is causing this? How can it be solved?
回答1:
On #imgSlot, set the dimensions in the HTML:
<img id="imgSlot" src="img/slot.png" width="322" height="147">
and the problem no longer happens.
Your original code: http://jsbin.com/efejay
With dimensions: http://jsbin.com/efejay/2
This is clearly a WebKit bug. I think it's related to the image being cached. I've seen similar things in the past, but JavaScript is usually involved. For example: jQuery height() returning false values
回答2:
Try position: relative on #rightColumn and position the element with top and left instead of margin
来源：https://stackoverflow.com/questions/10709557/chrome-changes-style-after-refresh-and-corrects-it-when-i-right-click-to-inspect