Why alignment mark list is different on WebKit when using :before height?

后端未结

关注

 1  1649

野趣味

Code: http://jsbin.com/maropaxivo/1/edit?html,css,output

See the sample code Firefox and Chrome browsers. Why alignment mark list is different?

相关标签:

1条回答

不知归路

2021-01-03 09:19

So I investigated more into this issue:

Here is how it behaves now- note that the before is a block element while the content of li is inline.

li:before {
  height: 20px;
  content: " ";
  display: block;
  background-color: #ccc;
}

<body>
  <ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
  </ol>
</body>

If I make both the items a block element by wrapping the text in a div, we have the same behaviour.

li:before {
  height: 20px;
  content: " ";
  display: block;
  background-color: #ccc;
}

<body>
  <ol>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
  </ol>
</body>

If I change the before element to inline-block, we will finally see the same behavior in Firefox and Chrome:

li:before {
  height: 20px;
  content: " ";
  display: inline-block;
  width: 100%;
  background-color: #ccc;
}

<body>
  <ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
  </ol>
</body>

If I change the before element to inline-block, and keep the content as block we will again see the same behavior in Firefox and Chrome:

li:before {
  height: 20px;
  content: " ";
  display: inline-block;
  width: 100%;
  background-color: #ccc;
}

<body>
  <ol>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
    <li>
      <div>123</div>
    </li>
  </ol>
</body>

Comments:

So whenever the before is inline-block (cases 3 and 4 above) or even inline for that matter, we see same behavior in Firefox and Chrome.

In Firefox, the numbers are aligned with the first inline element.
In Chrome, it doesn't matter even if it is a block element.

I strongly believe that this behavior is because there is a small difference in the user agent(browser) implementation of list-item display.

Conclusion:

Use inline-block and you won't face this discrepancy.

Let me know your feedback on this. Thanks!

EDIT:

So if you want it to look like the Firefox implementation of your code in both browsers, you can make the before absolute relative to the li:

li{
  position: relative;
  margin-top: 25px;
}
li:before {
  height: 20px;
  content: " ";
  display: block;
  width: 100%;
  background-color: #ccc;
  position:absolute;
  top: -20px;
}

<body>
  <ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
  </ol>
</body>

0 讨论(0)

热议问题