Safari和CSS列的问题
Safari和CSS列的问题
提问于 2018-06-19 15:46:40
我在使用纯CSS和HTML创建项目网格的过程中。我在Safari中测试时遇到了一个问题。我已经将代码提取到一个CodePen中，它的工作方式与我的网格相同。
这是我用来重现这个问题的代码：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
background: WhiteSmoke;
}
.wrapper {
display: block;
font: 400 14px/1.3 "Helvetica", sans-serif;
width: 100%;
padding: 0 20px;
@media only screen and (min-width : 768px) {
column-count: 2;
font-size: 17px;
column-gap: 20px;
}
@media only screen and (min-width : 992px) {
column-count: 3;
}
}
.wrapper > * {
@media only screen and (min-width : 768px) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
}
.wrapper > *:last-child {
margin-bottom: 0;
}
.card {
box-sizing: border-box;
display: block;
width: 100%;
overflow: hidden;
background: #FFF;
border: 1px solid red;
margin-bottom: 20px;
padding: 15px;
font-family: "Helvetica", sans-serif;
}
<div class="wrapper">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
<div class="card">E</div>
</div>下面是两个截图(都是在macOS 10.13上拍摄的)，展示了在Chrome和Safari中的不同结果。
问题是Safari似乎将上一项的空白处转移到了第二列。有没有办法强制类似于Chrome的行为？
编辑：
我还应该包括我已经尝试将.card设置为display: inline-block;，这使得它在Chrome和Safari中看起来都很好，只要项目的大小相同即可。
下面是另一个比较Chrome和Safari的截图，这一次.card有display: inline-block;，第一个项目比其他项目大得多。
回答 2
Stack Overflow用户
发布于 2019-10-03 13:01:37
我的团队也遇到了同样的问题，我们通过在列的底部添加额外的div来解决这个问题，其中包含所需边距的高度--底部和宽度为100%
Stack Overflow用户
发布于 2021-02-02 16:53:25
为了避免添加html元素，您还可以在属性后添加：after display:block。
figure {
&:after {
content: "";
height: 80px;
display: block;
@media @mobile {
height: 40px;
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50932324
复制相关文章
相似问题
腾讯云开发者
