Chrome 液体布局问题

Question

我有这个类的 div：

 .header {
    width: 100%;
    height: 10%;
}

如果您使用网络开发工具检查此内容，您可以看到浏览器如何计算元素的宽度和高度：

IE 9 --> 854.24 x 26.05

Firefox 15.01 --> 854 x 28

Safari 5.1.7 --> 843 x 27

铬 22.0.1229.94 m --> 951 x 36

现在，正如您在上面看到的，Chrome 以不同的方式计算 %。我该如何解决这个问题？这是一个错误吗？ Safari 也使用 webkit，但没有这个问题。

Answer 1

您看到的是基于视口、html 和 body 标签大小的计算。如果视口（即您在窗口中看到的区域）发生变化，那么 html->body->div 的大小也会发生变化。只需添加另一个工具栏就会改变这些大小。

这是“响应式网页设计”的目的之一，内容决定了元素的大小，我们不应再将布局基于设备上的像素数。但这确实会变得深入和偏离主题。