为啥使用 :before 高度时，WebKit 上的对齐标记列表不同？

Posted 2023-02-22

技术标签:

【中文标题】为啥使用 :before 高度时，WebKit 上的对齐标记列表不同？【英文标题】：Why alignment mark list is different on WebKit when using :before height?为什么使用 :before 高度时，WebKit 上的对齐标记列表不同？ 【发布时间】：2017-01-25 15:27:30 【问题描述】：

代码：http://jsbin.com/maropaxivo/1/edit?html,css,output

查看示例代码 Firefox 和 Chrome 浏览器。为什么对齐标记列表不同？

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

</html>

【问题讨论】：

【参考方案1】：

所以我对这个问题进行了更多调查：

before

block

li

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>

div

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>

before

inline-block

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>

before

inline-block

block

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>

评论：

因此，每当before 是inline-block（上述情况3 和4）甚至inline 时，我们都会在Firefox 和Chrome 中看到相同的行为。

在 Firefox 中，数字与第一个内联元素对齐。

在Chrome中，就算是块元素也没关系。

我坚信这种行为是因为list-item显示的用户代理（浏览器）实现存在细微差别。

结论：

使用inline-block，您将不会遇到这种差异。

让我知道您对此的反馈。谢谢！

编辑：

因此，如果您希望它看起来像您的代码在两个浏览器中的 Firefox 实现，您可以将 before 绝对 relative 设置为 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>

【讨论】：

我觉得 Firefox 用的更真实。我们可以像 Firefox 一样为这两种浏览器设置吗？查看上面的更新答案...让我知道您对此的看法...谢谢！

以上是关于为啥使用 :before 高度时，WebKit 上的对齐标记列表不同？的主要内容，如果未能解决你的问题，请参考以下文章

MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END

APP上点击事件时取消点击的阴影

为啥 QWebkit 在 -webkit-scrollbar css 中使用时不解析 file:// 和 qrc://？

如何为 :before 和 :after 伪元素启用 -webkit-animation/transition-property？

margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;