Question

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

Answer 1

我没有检查过你的页面，所以虽然css可能有问题，但我怀疑这两个浏览器是不同的。

我建议其中一个：

1）设计你的页面，这样就不需要某个元素成为一个精确的绝对位置（使用更多的相对定位）

2）使用条件注释向页面添加包装类并编写新的css规则来调整div，例如。

.ie8 #myAbsoluteDiv {
    top: /* something different from safari */
}

Answer 2

元素位于top: 50%，这意味着当页面加载时，框的顶部位于窗口可见区域的一半（“视口”）。

这是一个相当标准的CSS，应该可以在两种浏览器中正常工作。

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

这很有可能是你所看到的：浏览器都运行良好;他们只是遵循相同的指令，因为他们的视口大小不同。

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

这种效果没有任何本质上的错误 - 如果你试图将某些东西定位到50％，那么它根据它所在窗口的大小自然会处于不同的位置。这实际上可能是一件好事，因为这意味着无论屏幕大小如何，您都可以确保它对所有用户都是可见的和居中的。

但是，如果您确实想要阻止此效果，我建议使用top样式的固定像素值，而不是百分比。

如果你想定位它absolute，但是相对于整个页面而不是窗口大小定位，那么你需要在它之外创建一个元素（可能是你的body元素）{ {1}}。然后它会测量你的盒子的绝对位置而不是视口。

希望有所帮助。