Code: http://jsbin.com/maropaxivo/1/edit?html,css,输出
请参阅 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>所以我对这个问题进行了更多调查：
before is a block元素，而内容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>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>Comments:
所以每当before is inline-block（上述情况 3 和 4）或者甚至inline就此而言，我们在 Firefox 和 Chrome 中看到了相同的行为。
在 Firefox 中，数字与第一个内联元素对齐。
在Chrome中，即使是块元素也没有关系。
我坚信这种行为是因为用户代理（浏览器）实现存在微小差异list-item展示。
结论:
Use inline-block并且您不会面临这种差异。
让我知道您对此的反馈。谢谢！
EDIT:
因此，如果您希望它在两个浏览器中看起来像您的代码的 Firefox 实现，您可以将before绝对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>