Question

我制作了一个行格式为1fr 1fr 1fr的网格模板。在中间行，有一个内嵌图像列表。

在Chrome和Firefox中，图像会尊重网格行的高度并正确调整。但是，在Safari 10.1.2和Safari TP 31中，似乎存在溢出行的图像组合而未适当缩放图像宽度。

也许我做错了什么？或者这是一个Safari bug？如果是这样，是否有解决方法？

Safari 10.1

Safari TP

Chrome 60

＆＃13;

#grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

#thumbnailContainer {
  position: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

img {
  display: inline;
  height: 100%;
  width: auto;
}

header,
footer {
  background-color: dodgerblue;
}

＆＃13;

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

＆＃13;

https://jsfiddle.net/fqkjhh6m/1/

Answer 1

简答

问题是Safari无法识别height: 100%元素上的img。

说明

这不是Safari的错误。它只是对规范的不同解释。

在处理百分比高度时，某些浏览器（如Safari）遵循规范的传统解释，这需要在父级上定义高度。

10.5 Content height: the height property

<强> <percentage>

指定百分比高度。百分比用计算   相对于生成的包含块的高度。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则计算使用的高度，就像指定了auto一样。

换句话说，仅当父级具有已定义的高度时，才会识别插入元素的百分比高度。

某些浏览器（例如Chrome和Firefox）已经超越了这种解释，现在接受弹性和网格高度作为高度百分比的孩子的适当父级参考。

但Safari过去一直困扰着。这并不意味着它是错误的，无效的或是错误的。

CSS height定义的最后一次实质性更新是在1998年（CSS2）。自那时以来，有如此多的新CSS属性和技术，这个定义已经过时，不清楚，并且非常不完整。在为现代使用更新定义之前，可以预期浏览器渲染变化。

解决方案

由于Safari无法识别height: 100%元素上的img，因此您无法在父级（#thumbnailContainer）上指定高度，因为该高度为在顶级容器上由grid-template-rows: 1fr定义，您可以尝试使用flexbox。

通过使#thumbnailContainer成为弹性容器，您可以使用弹性属性定义图像的大小（弹性项目）。

＆＃13;

#grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
#thumbnailContainer {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  min-height: 0;
}
img {
  flex: 0 0 35%;
  min-width: 0;
  object-fit: cover;
}
header, footer {
  background-color: dodgerblue;
}

＆＃13;

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

＆＃13;

CSS Grid Row Height Safari Bug

1 个答案:

简答

说明

解决方案

jsFiddle

更多信息