Chrome刷新后样式改变，右键检查后可以纠正样式。

Question

这是一个相当奇怪的 bug，至少在我的经验中是这样的。

我已经制作了一个测试版本的网站，所以您可以在这里实时查看。

复现步骤：

进入网站，您会看到 #thelist 的显示正常，就像应该的那样。

问题出现在当你进行简单的刷新时，我使用的是Windows机器，所以按Ctrl+R或F5进行刷新。

现在，#thelist将改变其位置：

我的主要问题是，当我尝试检查该元素时，它会立即回到正确的位置...请注意，如果您进行硬刷新Ctrl+Shift+R或Ctrl+F5，则该元素将返回到其正确的位置。这是如何发生的？是什么原因导致了这种情况？如何解决？

- Trufa

---

太可爱了！检查元素，然后（在检查窗口打开的情况下）刷新。你就能调试那个问题了。我猜是因为绝对定位，但是...效果很可爱！ - Adriano Repetti

@Adriano，好棒的技巧，對於這個特定的問題並沒有幫助，但還是很有用的！ - Trufa

Answer 1

在HTML中，对于#imgSlot，设置其尺寸大小。

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

问题已经不再出现。

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

带有尺寸的代码：http://jsbin.com/efejay/2

显然这是一个WebKit的bug。我认为与图像被缓存有关。我以前也见过类似的情况，但通常涉及JavaScript。例如：jQuery height()返回错误值

- thirtydot

---

我真是他妈的永远都找不到那个！！所以只是为了确认我理解得正确，你强制刷新图像设置其高度和宽度，并强制布局设置在位置上？ - Trufa

根据我对这个错误的有限理解，就像WebKit在确定图像高度之前“过早”地决定了元素的位置。您可以通过设置img的高度或以不依赖于已知img高度的方式定位#thelist（如tbleckert建议的那样）来解决您的问题。 - thirtydot

为什么听起来不对？浏览器知道img的大小，你没有理由去设置它。如果img是布局/设计的一部分，它应该是CSS中的背景图像，而不是HTML中的img标签。我从哪里听到的？从我作为前端开发人员7年的经验中。此外，有很多人都有用于删除WordPress生成的图像的宽度和高度的函数。 - tbleckert

@tbleckert：我同意在这种情况下，应该使用background-image。做得好。然而，如果你说“永远不应该在img标签上设置宽度和高度”，最好有一些可引用的来源。你的理由都不太令人信服。这是Google的看法：https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions - thirtydot

嗯，好的，这很有道理..但我仍然认为这不是必要的。谢谢提供链接，撤回我的陈述;) - tbleckert

Answer 2

尝试在#rightColumn上使用position: relative，并使用top和left来定位元素，而不是使用margin。

- tbleckert