代码:
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>
原文地址:https://www.jb51.cc/html/232243.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。