尽管绝对定位，但在 webkit 浏览器中调整窗口大小时元素位置会发生变化答案

【问题标题】：Element position changes on window resize in webkit browsers, despite absolute positioning尽管绝对定位，但在 webkit 浏览器中调整窗口大小时元素位置会发生变化
【发布时间】：2014-07-01 01:43:14
【问题描述】：

我有一个元素位于网站上的图像之上。图像在所有浏览器中的正确位置加载到窗口中，并重新定位到除 webkit（特别是 Safari 和 Chrome）之外的所有浏览器中它所属的位置。在 webkit 浏览器中，当您尝试调整窗口大小时，它会重新定位图像下方的元素并设置其相对于图像的边距。

这是我的html：

<body>

<div class="header-image">
  <img id="headerimg" src="images/header.jpg" alt="" />
  <img id="link-header" src="images/link-header.png" alt="" />
</div>

</body>

这是 CSS：

body { max-width:1236px; margin:0 auto; position:relative; }
.header-image { width:100%; height:auto; max-width:1236px; margin:0 auto; position:relative; }
#headerimg { width:100%; max-width:1236px; height:auto; }
#link-header { position:absolute; right:0; margin-right:10%; margin-top:275px; }

就像我说的那样，其他所有浏览器都可以很好地调整大小。我遇到这个问题的只有 webkit。有什么想法吗？

【问题讨论】：

它“重定位”了什么元素？
如果你制作一个 JSFiddle 或 CodePen 会容易得多:)
重定位的是#link-header 元素。我想做一个 jsfiddle，但这是为了工作，由于合规性问题，我无法发布任何图片。对于那个很抱歉。有什么想法吗？

标签： html css webkit position css-position

【解决方案1】：

这绝对与图像无关，因为我没有使用任何图像，并且在 1159 像素以上的 Chome 和 1209 像素以上的苹果 safari 上也经历过同样奇怪的大小、定位和居中行为，但在苹果上的行为略有不同。 1235px 和 1250px 之间的大小是不同的奇怪。我意识到这不是一个很好的诊断帖子，但它和我目前所拥有的一样好。如果/当我发现更多，我会发布更多。这是在调整大小后在 winXP 机器上测试的。几个小时以来我一直在摸不着头脑，所以你绝对不是一个人。

如果可以的话，将大小设置为 1200px 以下应该可以解决。抱歉，我没有更多帮助。

【讨论】：