带有内联块 LI 的 UL 在 Chrome、Firefox 中的高度不正确 [重复]答案

【问题标题】：UL with Inline block LIs gets incorrect height in Chrome, Firefox [duplicate]带有内联块 LI 的 UL 在 Chrome、Firefox 中的高度不正确 [重复]
【发布时间】：2016-09-03 01:01:06
【问题描述】：

我有一个结帐屏幕，其中每个步骤的顶部都有一个横条。以下是 Safari 中的渲染（Mac OSX 为 9.1.2）：

蓝条是一个UL元素，购买过程中的每一步都是一个LI。 LI 是 inline-block，因此 UL 可以让 text-align: center 居中这些 LI。

这是 Chrome (52 Mac OS X) 中的渲染：

为了解决这个问题，我设置了 UL line-height: 0，然后设置了内部 LI line-height: 1.5。我知道这行得通，但我想知道为什么以及该解决方案是否会在未来产生更多问题。

还有其他人必须处理这个问题吗？

【问题讨论】：

你能给我们一个小提琴样本来演示这个问题吗？谢谢！
我似乎已将其缩小到我在 LI 元素上需要的 overflow: hidden（处理使用伪元素绘制的三角形）jsfiddle.net/highchair/x1znsy1x
我看到标记重复问题中的答案如何在这里应用。添加默认 vertical-align: baseline 属性以外的任何内容也可以在 Chrome 中解决此问题。但是，我想指出 overflow: hidden 属性在这里也可以发挥作用，因为它似乎调用了某种明确的修复程序。如果我离开 vertical-align: baseline 但将溢出更改为 visible，则 UL 会按预期在 Chrome 中崩溃。

标签： html css google-chrome safari

【解决方案1】：

为了解决这个问题，我设置了 UL line-height: 0，然后设置了内部 LIs line-height: 1.5（或任何您的默认行高）。

再一次，这在技术上是解决方案（如果有人遇到他们试图解决的相同问题）但我真正的问题是为什么会发生这种情况？

【讨论】：