为什么在使用 :before height 时 WebKit 上的对齐标记列表不同？

Question

代码：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>

Answer 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，我们最终会在 Firefox 和 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>

如果我将 before 元素更改为 inline-block，并将内容保留为 block，我们将再次在 Firefox 和 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>

评论:

因此，每当 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>

为什么在使用 :before height 时 WebKit 上的对齐标记列表不同？

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

html

css

webkit

google-chrome

list