为什么 Safari 中的 CSS Grid 行高不同？

Question

我使用 CSS Grid 布置了一个困难的网格布局，其中网格项目具有不同的高度和宽度。 网格行的高度设置为1fr ，使其与网格的高度成正比。 一些网格项目有一个grid-row: span 2或grid-row: span 3 。

网格元素绝对位于包装器内部，并在其上填充以保持纵横比。

在 -ms- 前缀的帮助下，这在 Chrome 和 Firefox 中都可以完美运行，甚至在 IE 中也能完美运行。

在 Safari 中，情况就不同了：

然而，在 Safari 中，网格行的计算方式似乎不同——Safari 中的行高比任何其他浏览器短得多，这破坏了布局。 为什么是这样？

从网格元素中删除绝对位置不会改变行高。 但似乎在网格包装器上放置height: 0会使行高在 Safari 中的行为与在 Chrome 和 Firefox 中的行为相同。 这背后的原因是什么？

代码：

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

Answer 1

我在 Safari 12+ 中遇到了类似的问题，因为我还使用填充来强制基于网格的布局中的纵横比。 我不确定这是否与您遇到的问题完全相同，但以下修复对我在 Safari 中的笔上适用。

TLDR ：将display:grid放在网格容器周围的 div 上。 这是在行动： https : //codepen.io/harrison-rood/pen/rNxXWPb

在为此撕了几个小时的头发后，我决定尝试将display:grid放在主网格周围的包装纸上，效果很好！ 我不知道为什么这会解决它，但我的猜测是它在父容器上为 Safari 提供了更多上下文，并且允许height:100%引用网格上下文而不是父容器，类似于 Chrome 和 Firefox默认处理这个。 这让我感到非常沮丧，以至于我觉得有义务创建一个 SO 帐户，以便我可以发布此内容！ 希望能帮助到你！

Answer 2

代替height: 100%在网格容器 ( .grid ) 上，使用height: 100vh 。

或者，如果您真的想使用百分比，请确保父级具有定义的高度。 一些浏览器仍然遵守关于百分比高度的旧规则，即：

具有百分比高度的元素必须有一个定义了高度的父元素作为参考点，否则百分比高度将被忽略。

更多细节在这里：

• 使用 CSS height属性和百分比值
• Chrome / Safari 未填充 100% 的 flex 父级高度

Answer 3

（作为答案发布以包含图片。）在按照您建议的设置height: 0修复后，我使用 Safari 和 Chrome (Vivaldi) 获得了这些结果。 正如您所说，这会从 Safari 中几乎折叠的状态扩展 div 的高度。

我想知道：它是您所针对的左侧的解决方案，还是应该像右侧的解决方案？ 如果左侧的替代方案是您的目标，您可以通过设置grid-auto-rows: auto on .grid获得相同的结果。 我猜在这两种情况下（ height: 0和grid-auto-rows: auto ）你都以某种方式有效地将高度计算作为 .grid-wrappers 高度的分数。

我不能说为什么 Safari 会以如此不同的方式执行此操作，但是 - 务实地 - 我个人会考虑使用网格区域而不是跨度来放置元素 - 至少在布局合理的情况下。