为什么在Safari中CSS网格行高不同？
我已经使用CSS Grid布局了一个困难的网格布局，其中网格项目具有不同的高度和宽度。网格行的高度设置为1fr，以便与网格的高度成比例。某些网格项具有grid-row: span 2或grid-row: span 3。
网格元素绝对位于包装器的内部，上面有填充，以保持纵横比。
这一切都在Chrome和Firefox中完美地工作，甚至在IE中都有-ms-前缀的帮助。
在Safari中的则是另一回事：
然而，在Safari中，网格行似乎不是以同样的方式计算的--在Safari中，行的高度比任何其他浏览器都要短得多，这就破坏了布局。为什么会这样呢？
从网格元素中删除绝对位置不会更改行高度。但是，似乎将height: 0放在网格包装器上会使Safari中的行高行为与Chrome和Firefox中的行为相同。这背后的原因是什么？
代码：
Codepen：https://codepen.io/katrina-isabelle/pen/rRqvXq
.grid-wrapper {
position: relative;
padding-bottom: 60%;
}
.grid {
display: grid;
grid-gap: 2px;
grid-template-columns: 29% 21% 21% 29%;
grid-auto-rows: 1fr;
position: absolute;
width: 100%;
height: 100%;
}
.grid-item {
width: 100%;
color: #ccc;
background: #ccc;
}
.grid-item--1 {
grid-row: span 2;
}
.grid-item--2 {
grid-row: span 3;
}
.grid-item--3 {
grid-row: span 2;
}
.grid-item--4 {
grid-row: span 3;
}
.grid-item--5 {
grid-row: span 2;
}
.grid-item--6 {
grid-row: span 3;
}
.grid-item--7 {
grid-row: span 2;
}
.grid-item--8 {
grid-row: span 2;
}
.grid-item--9 {
grid-row: span 1;
}<div class="grid-wrapper">
<div class="grid">
<div class="grid-item grid-item--1">
Grid item
</div>
<div class="grid-item grid-item--2">
Grid item
</div>
<div class="grid-item grid-item--3">
Grid item
</div>
<div class="grid-item grid-item--4">
Grid item
</div>
<div class="grid-item grid-item--5">
Grid item
</div>
<div class="grid-item grid-item--6">
Grid item
</div>
<div class="grid-item grid-item--7">
Grid item
</div>
<div class="grid-item grid-item--8">
Grid item
</div>
<div class="grid-item grid-item--9">
Grid item
</div>
</div>
</div>
回答 3
Stack Overflow用户
发布于 2020-08-01 02:33:49
我在Safari 12+中遇到了类似的问题，因为我也在基于网格的布局中使用填充来强制纵横比。我不确定这是否是你遇到的完全相同的问题，但下面的修复方法适用于我在Safari中的钢笔。
TLDR：将display:grid放在网格容器周围的div上。这就是它的实际作用：https://codepen.io/harrison-rood/pen/rNxXWPb
经过几个小时的努力，我决定尝试将display:grid放在我的主网格周围的包装器上，它工作得很好！我不知道为什么这会解决这个问题，但我猜它会给Safari提供更多关于父容器的上下文，这允许height:100%引用网格上下文而不是父上下文，类似于Chrome和Firefox默认情况下的处理方式。这让我很沮丧，我觉得有义务创建一个so账号，这样我就可以发布这篇文章了！希望它能帮上忙！
Stack Overflow用户
发布于 2019-03-26 10:01:03
在网格容器(.grid)上使用height: 100vh，而不是height: 100%。
或者，如果您真的想使用百分比，请确保父对象具有定义的高度。一些浏览器仍然遵循关于百分比高度的旧规则，即：
具有百分比高度的元素必须具有定义高度为参考点的父元素，否则百分比高度将被忽略。
更多详细信息请点击此处：
Stack Overflow用户
发布于 2019-03-26 08:22:00
(发布为答案，以便包括图片。)我使用Safari和Chrome (Vivaldi)得到了这些结果，在遵循了你建议的设置height: 0的修复之后。正如您所说，这在Safari中扩展了div的高度，而不是几乎崩溃的状态。
我想知道:你想要的是左边的解决方案，还是应该像右边一样？如果左边的替代方案是您的目标，那么在.grid上设置grid-auto-rows: auto可以得到相同的结果。我猜在这两种情况下( height: 0和grid-auto-rows: auto)，您都以某种方式有效地避免了将高度计算为.grid-wrappers高度的一部分。
我不能说为什么Safari会以一种如此不同的方式来做这件事，但--务实地--我个人会考虑使用网格区域而不是跨度来放置元素-至少如果布局是合理的话。
https://stackoverflow.com/questions/55347359
复制相似问题