html – 为什么在使用时在WebKit上对齐标记列表是不同的：在高度之前？_html-js-css

概述代码： http://jsbin.com/maropaxivo/1/edit?html,css,output 请参阅示例代码Firefox和Chrome浏览器.为什么对齐标记列表不同？ li:before { height: 20px; content: " "; display: block; background-color: #ccc;} <!DOCTYPE html>< 代码： 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>

总结

以上是内存溢出为你收集整理的html – 为什么在使用时在WebKit上对齐标记列表是不同的：在高度之前？全部内容，希望文章能够帮你解决html – 为什么在使用时在WebKit上对齐标记列表是不同的：在高度之前？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1108532.html

html – 为什么在使用时在WebKit上对齐标记列表是不同的：在高度之前？

发表评论

评论列表（0条）