CSS 网格行高 Safari 错误

Question

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

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

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

野生动物园 10.1

Safari TP

Chrome 60

#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;
}

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

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

Answer 1

简答

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

说明

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

在处理百分比高度时，某些浏览器（如 Safari）遵循规范的传统解释，这需要在 parent.

上定义高度

10.5 Content height: the height property

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if auto was specified.

换句话说，只有当 parent 具有定义的高度时，才会识别 in-flow 元素上的百分比高度。

一些浏览器，例如 Chrome 和 Firefox，已经超越了这种解释，现在接受 flex 和网格高度作为 parent 对具有百分比高度的 child 的充分参考.

但是 Safari 停留在过去。这并不意味着它是错误的、无效的或错误。

CSS height 定义的最后一次实质性更新是在 1998 年 (CSS2)。从那时起，由于出现了如此多的 CSS 新属性和技术，该定义已经过时、不明确且严重不完整。在更新定义以供现代使用之前，浏览器呈现变化是可以预料的。

解决方案

由于 Safari 无法识别 img 元素上的 height: 100%，并且您无法在 parent (#thumbnailContainer) 上指定高度，因为高度由 grid-template-rows: 1fr 在 top-level 容器上定义，您可以尝试使用 flexbox.

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

#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;
}

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

CSS 网格行高 Safari 错误

CSS Grid Row Height Safari Bug

html

css

safari

css-grid

简答

说明

解决方案

jsFiddle

更多信息