3

看看这个小提琴:http: //jsfiddle.net/WTcgt/

为什么BOX1被BOX2的边框量下推?这是一个错误吗?

4

2 回答 2

3

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

于 2012-06-04T09:35:10.117 回答
1

您的框是内联块框,而不仅仅是常规内联框,因此它们的边框在这方面充当“填充”。

需要明确的是,由于 BOX2 上有一个顶部边框,它会将 BOX2 的内容区域向下推(尽管 ! 可能暗示了什么,但它不会渗入内容区域box-sizing: border-box)。这会导致同一行上所有其他内联块框的内容区域跟随,如规范中所述(强调我的):

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始,与'line-height'无关。但在计算行框高度时只使用“行高” 。

于 2012-06-04T09:24:27.670 回答