看看这个小提琴:http: //jsfiddle.net/WTcgt/
为什么BOX1被BOX2的边框量下推?这是一个错误吗?
Internet Explorer、Opera 和 Chrome 支持 box-sizing 属性。
Firefox 支持另一种选择,即-moz-box-sizing
属性。
Safari 支持另一种选择,即-webkit-box-sizing
属性。
这是工作示例http://jsfiddle.net/WTcgt/2/
这是inline-block的行为:
内联块被内联放置(即与相邻内容在同一行),但它的行为类似于块。
用来vertical-align:top
避免这个问题。如果我们不使用 vertical-align 属性,那么元素会根据相邻元素在同一行中对齐。欲了解更多信息,请阅读http://www.impressivewebs.com/inline-block/和http://www.brunildo.org/test/inline-block.html
您的框是内联块框,而不仅仅是常规内联框,因此它们的边框在这方面充当“填充”。
需要明确的是,由于 BOX2 上有一个顶部边框,它会将 BOX2 的内容区域向下推(尽管 ! 可能暗示了什么,但它不会渗入内容区域box-sizing: border-box
)。这会导致同一行上所有其他内联块框的内容区域跟随,如规范中所述(强调我的):
内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始,与'line-height'无关。但在计算行框高度时只使用“行高” 。