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

Posted 2023-02-22

【中文标题】Chrome 在刷新后更改样式并在我右键单击检查时更正它

【英文标题】：Chrome changes style after refresh and corrects it when I right click to inspect it

【发布时间】：2012-05-29 09:19:09

【问题描述】：

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

我已经制作了该网站的测试版本，以便您可以实时查看here。

重现步骤：

进入该网站，你看#thelist 应该没问题：

当你在 Windows 机器上进行简单刷新时，问题就出现了，所以 Ctrl+R 或 F5。

现在#thelist 会去改变它的位置：

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

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

这怎么可能，是什么原因造成的？怎么解决？

【问题讨论】：

可爱！检查元素，然后（打开检查窗口）进行刷新。您将能够调试该问题。我猜是因为绝对位置，但是...可爱的效果！

@Adriano 不错的技巧，它实际上对这个特定问题没有帮助，但无论如何还是有用的！

【参考方案1】：

在 #rightColumn 上尝试 position: relative 并使用 top 和 left 而不是 定位元素>边距

【参考方案2】：

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

<img id="imgSlot" src="img/slot.png"  >

问题不再发生。

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

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

这显然是一个 WebKit 错误。我认为这与正在缓存的图像有关。我过去见过类似的事情，但通常会涉及到 javascript。例如：jQuery height() returning false values

【讨论】：

该死的，我永远也找不到那个！！所以只是为了看看我是否理解正确，你强制刷新图像设置它的高度和宽度并强制布局设置到位？

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

你不应该在 img 标签上设置宽度和高度，我相信。我知道你为什么要这样做，但如果有一个选项，请使用它。

@tbleckert：我同意在这种情况中，它应该是background-image。好决定。但是，如果你说“你永远不应该在 img 标签上设置宽度和高度”，你最好有一些来源可以引用。你的理由都没有说服力。以下是 Google 的想法：developers.google.com/speed/docs/best-practices/…

嗯好吧，这是有道理的..但我仍然认为没有必要。感谢您的链接，我收回我的声明；）