google-chrome - CSS盒模型问题: box-sizing + 100% height + border + inline-block

Question

看看这个 fiddle : http://jsfiddle.net/WTcgt/

为什么 BOX1 被 BOX2 的 border 下推？这是错误吗？

Answer 1

Internet Explorer、Opera 和 Chrome 支持 box-sizing 属性。

Firefox 支持另一种选择，-moz-box-sizing 属性。

Safari 支持另一种选择，即 -webkit-box-sizing 属性。

这是工作示例 http://jsfiddle.net/WTcgt/2/

这是inline-block的行为:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

使用vertical-align:top 来避免这个问题。如果我们不使用 vertical-align 属性，那么元素会根据相邻元素在同一行中对齐。更多信息请阅读 http://www.impressivewebs.com/inline-block/和 http://www.brunildo.org/test/inline-block.html