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

发布时间：2020-12-14 21:14:57 所属栏目：资源来源：网络整理

导读：代码： http://jsbin.com/maropaxivo/1/edit?html,output 请参阅示例代码Firefox和Chrome浏览器.为什么对齐标记列表不同？ li:before { height: 20px; content: " "; display: block; background-color: #ccc;} !DOCTYPE htmlhtmlhead meta charset="utf-8"

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!