Chrome液体布局问题

Question

我有这个班的div：

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

如果您使用Web开发人员工具进行检查，则可以看到浏览器如何计算元素的宽度和高度：

IE 9 - ＆gt; 854.24 x 26.05

Firefox 15.01 - ＆gt; 854 x 28

Safari 5.1.7 - ＆gt; 843 x 27

Chrome 22.0.1229.94 m - ＆gt; 951 x 36

现在，正如您上面所读到的，Chrome会以不同的方式计算％。我怎么能解决这个问题？这是一个错误吗？ Safari也使用webkit，但没有这个问题。

Answer 1

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

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