Chrome liquid布局问题

Question

我在这个类中有一个div：

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

如果你使用web开发工具检查，你可以看到浏览器是如何计算元素的宽度和高度的：

IE 9 --> 854.24 x 26.05

Firefox 15.01 --> 854 x 28

Safari 5.1.7 --> 843 x 27

Chrome 22.0.1229.94 m --> 951 x 36

现在，正如你可以在上面看到的，Chrome以一种不同的方式计算百分比。我该如何解决这个问题呢？这是一个bug吗？Safari也使用webkit，但没有这个问题。

Answer 1

您看到的是基于viewport、html和body标记的大小的计算。如果视区发生变化，那么html->body->div的大小也会发生变化。只需添加另一个工具栏即可更改这些大小。

这是“响应式网页设计”的目的之一，内容决定了元素的大小，我们不应该再根据设备上的像素数来布局。但这将是真正深入和离题的。