为什么Safari中的CSS网格行高不同？ [英] Why is CSS Grid row height different in Safari?

问题描述

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

网格元素绝对位于包装内部，上面有填充，以保持纵横比。

在Chrome和Firefox中，甚至在IE中，只要使用-ms-前缀，这一切都能完美地工作。

在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>

推荐答案

我在Safari12+中也遇到过类似的问题，因为我也在基于网格的布局中使用填充来强制纵横比。我不确定这是否是您遇到的完全相同的问题，但下面的修复程序适用于您在Safari中的钢笔。

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

在这上面费力了几个小时之后，我决定试着把display:grid放在我的主网格周围的包装器上，它工作得很好！我不知道为什么这会修复它，但我猜它会给Safari提供更多父容器的上下文，这允许height:100%引用网格上下文而不是父上下文，类似于Chrome和Firefox默认情况下处理这一问题的方式。这让我很沮丧，我觉得有义务创建一个SO账号，这样我就可以发布这篇文章了！希望能有所帮助！

这篇关于为什么Safari中的CSS网格行高不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！