Chrome在刷新后更改样式，并在我右键单击以检查它时进行更正

Question

至少根据我的经验，这是一个非常奇怪的错误。

我已经制作了该网站的测试版本，因此您可以看到它here。

重现的步骤：

进入该网站，哟见#thelist就好了：

当你做一个简单的刷新时，问题出现在我的Windows机器上，所以 Ctrl + R 或 F5 。

现在#thelist将更改它的位置：

我解决这个问题的主要问题是，当我尝试检查元素时，它会回到正确的位置......

另请注意，如果您进行硬刷新 Ctrl + Shift + R 或 Ctrl + F5 然后元素将返回到它的正确位置。

这怎么可能，导致这种情况的原因是什么？怎么解决？

Answer 1

在#imgSlot上，在HTML中设置尺寸：

<img id="imgSlot" src="img/slot.png" width="322" height="147">

并且问题不再发生。

您的原始代码：http://jsbin.com/efejay

尺寸为：http://jsbin.com/efejay/2

这显然是一个WebKit错误。我认为这与缓存的图像有关。我以前见过类似的东西，但通常涉及JavaScript。例如：jQuery height() returning false values

Answer 2

在 #rightColumn 上尝试位置：相对，并使用顶部和左侧代替余量