相关疑难解决方法(0)
当项目数等于列数时，chrome 和 safari 渲染 css 列的方式不同
我有一个目录列表，它使用 CSS 列，但在 Chrome 和 Safari 中的行为有所不同。目录的每个部分都有一个包装器，将列表排列成两列。
我已经有了 CSS，所以 Chrome 会按照我想要的方式呈现它：
在 Safari 中，第二列中的第一项有时在其上方有明显的边距。
我可以通过添加display: inline-block;到列表元素来在 Safari 中修复此问题。这破坏了 Chrome 中的布局，因为只有两个项目的部分在第一列中列出了这两个项目。
片段：
ul {
moz-column-count:2;
-webkit-column-count:2;
column-count:2;
column-gap: 2em;
}
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
width:100%;
list-style-type:none;
padding:10px;
box-sizing:border-box;
background-color: #90cdc0;
margin-bottom: 2em;
}<h3>
A
</h3>
<ul>
<li>Anna<p>Sometimes there is additional content</p></li>
<li>Anya</li>
</ul>
<h3>
B
</h3>
<ul>
<li>Bartolo <p>Sometimes there is additional content. The boxes are of variable size.</p></li>
<li>Beatriz</li>
<li>Benedicto</li>
<li>Boggins</li>
</ul>是否可以设置这个两列目录的样式，使其在所有浏览器中都能正确显示？
5
推荐指数
推荐指数
1
解决办法
解决办法
2458
查看次数
查看次数