1

I have a checkout screen with a bar cross the top for each step in the process. Below is the render in Safari (9.1.2 for Mac OSX):

enter image description here

The blue bar is a UL element, and each step in the purchase process is an LI. The LIs are inline-block so that the UL can have text-align: center center those LIs.

And here is the render in Chrome (52 Mac OS X):

enter image description here

To fix this, I set the UL line-height: 0 and then the inner LIs line-height: 1.5. I know that this works, but I'd like to know why and if the solution might be creating more problems down the road.

Has anyone else had to deal with this issue?

J. Hogue
  • 314
  • 4
  • 11
  • can you give us a sample fiddle to demonstrate the issue? Thanks! – kukkuz Sep 02 '16 at 16:54
  • I seem to have narrowed it down to the `overflow: hidden` that I need on the LI elements (to handle the triangle being drawn with a pseudo element) https://jsfiddle.net/highchair/x1znsy1x/ – J. Hogue Sep 02 '16 at 17:25
  • I see how the answer in marked duplicate question can apply here. Adding anything other than the default `vertical-align: baseline` property also fixes this issue in Chrome. However, I would like to note that the `overflow: hidden` property also has a role to play here, as it seems to invoke some sort of clear fix. If I leave `vertical-align: baseline` but change overflow to `visible`, the UL collapses in Chrome as expected. – J. Hogue Sep 02 '16 at 17:34

1 Answers1

0

To fix this, I set the UL line-height: 0 and then the inner LIs line-height: 1.5 (or whatever your default line-height is).

Again, that is technically the solution (if someone has the same problem that they are trying to fix) but the real question that I have is why is this happening?

J. Hogue
  • 314
  • 4
  • 11