css - 与 IE8 相比，绝对定位元素在 safari 中显示在不同的位置

Question

对于 www.zabb.co.uk/test2b.html，displayDiv 在 IE8 中显示的位置比在 Safari 中高。我怎样才能使它们显示在完全相同的垂直位置？提前致谢。

Answer 1

该元素位于 top: 50%，这意味着当页面加载时，框的顶部位于窗口可见区域(“视口(viewport)”)下方的一半位置。

这是相当标准的 CSS，在两种浏览器中都应该能正常工作。

但是，因为位置是基于可见浏览器窗口大小的大小，所以确切位置在不同浏览器中会有所不同，即使您在同一屏幕上将它们都最大化，因为两个浏览器会使用不同数量的他们的工具栏等空间，因此他们的浏览器视口(viewport)大小会有所不同。

这很可能是您所看到的原因:浏览器都工作正常；他们只是按照不同的方式执行相同的指令，因为他们的视口(viewport)大小不同。

如果您更改浏览器窗口的大小，您也会注意到同样的效果，这也意味着使用不同屏幕分辨率的用户会看到不同的效果，即使在同一个浏览器中也是如此。

这种效果本质上没有任何问题——如果您尝试将某些东西定位到 50%，那么它自然会根据其所在窗口的大小处于不同的位置。这实际上可能是一件好事，因为这意味着您可以确保它对所有用户可见并居中，无论他们的屏幕尺寸如何。

但是，如果您确实想避免这种影响，我建议为 top 样式使用固定像素值，而不是百分比。

如果你想将它定位为绝对，但相对于整个页面而不是窗口大小定位，那么你需要在它之外制作一个元素(可能是你的body 元素)position:relative；。然后它会测量你的盒子相对于那个而不是相对于视口(viewport)的绝对位置。

希望对您有所帮助。