Chrome刷新后更改样式，并在我右键单击检查它时进行更正 [英] Chrome changes style after refresh and corrects it when I right click to inspect it

问题描述

这是一个很奇怪的错误，至少在我的经验。

我已经测试版的网站，所以你可以看到它现在

包含尺寸： http://jsbin.com/efejay/2

这显然是一个WebKit错误。我认为它与缓存的图像相关。我曾经看过类似的东西，但通常涉及JavaScript。例如： jQuery height（）返回false值

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?

解决方案

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

这篇关于Chrome刷新后更改样式，并在我右键单击检查它时进行更正的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！