CSS 网格行高 Safari 错误

问题描述 投票：0回答：4

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

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

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

Safari 10.1

enter image description here

Safari TP

enter image description here

铬60

enter image description here

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

html css safari css-grid
4个回答
48
投票

简短回答

问题是 Safari 无法识别 

height: 100%
元素上的 
img
。

说明

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

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

10.5 内容高度：

height
财产

<percentage>

指定百分比高度。百分比的计算方式为 相对于生成的盒子的包含块的高度。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则使用的高度的计算方式就像指定了 

auto
一样。

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

Chrome 和 Firefox 等某些浏览器已经超越了这种解释，现在接受 Flex 和网格高度作为具有百分比高度的子级的充分父级参考。

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

CSS 

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

解决方案

由于 Safari 无法识别 

height: 100%
元素上的 
img
，并且您无法在父级 (
#thumbnailContainer
) 上指定高度，因为该高度是由顶级容器上的 
grid-template-rows: 1fr
定义的，你可以尝试使用flexbox。

通过将 

#thumbnailContainer
制作为 Flex 容器，您可以使用 Flex 属性定义图像（Flex 项目）的大小。

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

jsFiddle

更多信息

9
投票

不要问我为什么，但用一个简单的 div 包装网格父级解决了我的问题。

这篇文章（https://newbedev.com/why-is-css-grid-row-height- Different-in-safari）提到：

将 

display:grid
放在网格容器周围的 div 上。

我的问题只需用 div 包裹网格容器就解决了。只是想提一下另一个解决方案。我希望有人可以对这里发生的事情进行解释。

0
投票

任何有类似问题的人，如果您使用GRID，请不要将第一级子级设置为100％高度。 Safari 不会将 GRID（该组件的父组件）作为相对 100% 高度。

就我而言，Safari 使 GRID 内容（高度为 100%）溢出了 GRID。

0
投票

我也遇到过类似的情况，子项文本内容在 Safari 上垂直扩展到容器之外。子项设置为 

display:flex;
和 
justify-content: center
，而父容器设置为 
display:grid;
和 
flex-direction:row;
。

在父网格容器上应用 

grid-template-rows: max-content;
可以解决此问题。

请注意，这可能与上面的问题不完全相关，但分享此作为类似情况的潜在解决方案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.