带有内联块LI的UL在Chrome，Firefox中的高度不正确

Question

我有一个结帐屏幕，在此过程中的每个步骤都有一个横跨顶部的栏。下面是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。我知道这有效，但我想知道为什么以及解决方案可能会在未来产生更多问题。

还有其他人不得不处理这个问题吗？

Answer 1

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

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