Google chrome CSS框模型问题：框大小+；100%高度+；边界+；内联块

看看这把小提琴：

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

您的框是内联块框，而不仅仅是常规内联框，因此它们的边框在这方面起到了“填充”的作用

需要说明的是，由于BOX2上有一个上边框，因此它会向下推动BOX2的内容区域（不管

框大小：border box

！）可能会暗示什么，它都不会流入内容区域）。这会导致同一行上所有其他内联块框的内容区域也随之变化，如（强调部分）中所述：

内联未替换框的垂直填充、边框和边距从内容区域的顶部和底部开始，与内容无关。但在计算线框高度时仅使用

---

Internet Explorer、Opera和Chrome支持框大小属性

Firefox支持另一种选择，即

-moz-box-size

属性

Safari支持另一种选择，即

-webkit box size

属性

下面是一个工作示例

这是内联块的行为：

内联块被内联放置（即与相邻块位于同一直线上 内容），但其行为类似于块

---

使用

vertical align:top

可避免此问题。若我们不使用垂直对齐属性，那个么元素将基于相邻元素在同一条线上对齐。如需了解更多信息，请阅读。

99.99999%的情况下，当某些内容无法按您的预期工作时，它不是一个bug…@隐藏如果您是指CSS，则我同意。@Hidde，当某些内容无法按用户的预期工作时，它通常执行得不好。经过20多年的积极开发，我仍然无法理解为什么CSS样式如此反直觉。@OleksandrPshenychnyy我经常看到奇怪的CSS结构来实现一些非常简单的东西。然而，由于CSS已经使用了很长时间，我认为人们创建/使用新的样式语言（与HTML或JS结合使用）的障碍太大了。希望这一切都会改变，因为网页的交互性可以用今天的技术推到更高的水平。我接受了另一个答案，因为它不仅说这是正确的行为，而且还建议使用垂直对齐。我知道你的答案似乎更全面，但我不能接受两个答案。。。