代码：
http://jsbin.com/maropaxivo/1/edit?html,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>
解决方法
所以我对此问题进行了更多调查：
>以下是它现在的行为 – 请注意,before是块元素,而li的内容是内联的.
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,并将内容保留为块,我们将再次在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是内联块(上面的情况3和4)或甚至内联,我们在Firefox和Chrome中看到相同的行为.
>在Firefox中,数字与第一个内联元素对齐.
>在Chrome中,即使它是块元素也没关系.
我坚信这种行为是因为列表项显示的用户代理(浏览器)实现存在细微差别.
结论：
使用内联块,您将不会遇到这种差异.
请告诉我您对此的反馈.谢谢！
编辑：
因此,如果您希望它看起来像两个浏览器中的代码的Firefox实现,您可以使之前的绝对相对于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>
