我制作了一个网格模板，其中包含 1fr 1fr 1fr 行。中间行有一个内联图像列表。
在 Chrome 和 Firefox 中，图像尊重网格行的高度并适当调整。但是，在 Safari 10.1.2 和 Safari TP 31 中，似乎存在图像溢出行且未适当缩放图像宽度的组合。
也许我做错了什么？或者这是 Safari 的一个错误？如果是这样，有解决方法吗？
Safari 10.1
Safari TP
铬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/ https://jsfiddle.net/fqkjhh6m/1/
简答
问题是 Safari 无法识别height: 100% on the img元素。
解释
这不是 Safari 的错误。这只是对规范的不同解释。
在处理百分比高度时，某些浏览器（如 Safari）遵循规范的传统解释，这需要在父浏览器上定义高度。
10.5 内容高度：height财产 https://www.w3.org/TR/CSS22/visudet.html#the-height-property
<percentage>
指定百分比高度。百分比的计算方式为
相对于生成的盒子的包含块的高度。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则使用的高度计算如下auto被指定。
换句话说，只有当父级具有定义的高度时，才会识别流入元素的百分比高度。
某些浏览器（例如 Chrome 和 Firefox）已经超越了这种解释，现在接受 Flex 和网格高度作为具有百分比高度的子级的充分父级参考。
但 Safari 却停留在过去。这并不意味着它是错误的、无效的或错误。
CSS的最后一次实质性更新height定义是在1998年（CSS2 https://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property）。从那时起，随着如此多的新 CSS 属性和技术的出现，这个定义已经过时、不明确且严重不完整。在定义更新以供现代使用之前，浏览器呈现的变化是可以预料的。
Solution
由于 Safari 无法识别height: 100% on the 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 https://jsfiddle.net/fqkjhh6m/5/
更多信息
- 使用 CSSheight属性和百分比值 https://stackoverflow.com/a/31728799/3597276
- Chrome / Safari 未填充 Flex 父级的 100% 高度 https://stackoverflow.com/q/33636796/3597276
- 为什么弹性项目不会缩小到超过内容大小？ https://stackoverflow.com/q/36247140/3597276
- 为什么对象适配在 Flexbox 中不起作用？ https://stackoverflow.com/q/37127384/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
