看看这个小提琴：http: //jsfiddle.net/WTcgt/
为什么BOX1被BOX2的边框量下推？这是一个错误吗？
问问题
3518 次
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 回答