ChromeのインラインブロックLIのULが不正確な高さになる

プロセスの各ステップの上部に横棒が表示されたチェックアウト画面があります。以下はサファリ（マックOSX用9.1.2）でレンダリングされます。ChromeのインラインブロックLIのULが不正確な高さになる

青いバーは、UL要素である、と購入プロセスの各ステップは、LIです。 LIはinline-blockであるため、ULはtext-align: centerのLIをそれらのLIに集中させることができます。

そして、ここでは、クローム（52マックOS X）でレンダリングです：

これを修正するために、私はUL line-height: 0を設定し、インナーれるLI line-height: 1.5。私はこれがうまくいくことを知っていますが、その理由が分かっていれば解決策が多くの問題を引き起こしているかも知れません。

他に誰かがこの問題に対処していましたか？

出典

2016-09-02 J. Hogue

問題を示すためにサンプルのフィドルを教えてください。ありがとう！ – kukkuz

私はLI要素（疑似要素で描かれている三角形を扱うために必要な）の 'overflow：hidden'に絞り込んだようです。https://jsfiddle.net/highchair/x1znsy1x/ –

重複した質問の答えがここに適用されます。既定の 'vertical-align：baseline'プロパティ以外のものを追加すると、この問題がChromeで修正されます。しかし、私は、 'overflow：hidden'プロパティも何らかの明確な修正を呼び出すように見えるので、ここで果たす役割があることに注意したいと思います。私が 'vertical-align：baseline'を残してオーバーフローを' visible'に変更すると、ULは期待どおりChromeで崩壊します。 –

この問題を解決するために、UL line-height: 0、次に内側のLI line-height: 1.5（または、デフォルトの行の高さはどれでも）を設定します。

ここでも、それは技術的なソリューションです（誰かが、彼らが解決しようとしている同じ問題を持っている場合）が、私は持っている本当の問題はあるのですが、なぜでしょうか？

出典

2016-09-02 16:52:17

ChromeのインラインブロックLIのULが不正確な高さになる

答えて

関連する問題