grid-template-rows：Safari中的自动错误

Question

我现在正在学习CSS Grid，并在野生动物园中遇到“错误”

范例程式码

 html, body { width: 100%; height: 100%; color: white; text-transform: uppercase; text-align: center; font-family: helvetica, arial; } .full-size img { width: 100%; } article { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; } header { background: deeppink; padding: 1rem; } main { background: whitesmoke; color: #444; padding: 1rem; } footer { background: purple; padding: 1rem; } * { margin: 0 !important; padding: 0 !important; } 

 <article> <header> Page Header </header> <main> <strong contenteditable>Hi, there's not much content, yet. You can write in here to expand the container.</strong> <figure class="full-size"> <img src="http://www.book-a-flat.com/magazine/wp-content/uploads/2017/05/Paris-8-appartement-toit-terrasse-piscine.jpg"> </figure> <p>some text stuff...</p> </main> <footer> All rights reversed. <br> <small>I am always at the bottom of the page</small> </footer> </article> 

结果是在Safari中的外观：

这就是结果在Chrome中的外观：

为了使其工作，我添加了grid-template-columns: 100%; 网格元素，但是在本指南中，由Mozila提供，我们有以下注意事项：

注意： auto跟踪大小（仅auto跟踪大小）可以通过align-content和justify-content属性进行扩展。

修复grid-template-columns: 100%; 错误，还是Safari中的错误？

Answer 1

奇怪的是，问题出在所使用的图像上。 实际分辨率为1200x800 。 但是，我们正在检查的屏幕（MAC）具有更高的分辨率，从而导致图像拉伸其高度（到1000px左右）。

在Safari中，似乎1fr是根据实际图像大小而不是拉伸后的图像大小计算的，从而导致1fr被计算为800px 。

您会发现缩小屏幕时不会出现问题，因为此时图像不会拉伸。 另外，这就是我们在iPhone中看不到该问题的原因。

我们可以手动将高度设置为max-height 800px以避免它被拉伸作为解决此问题的方法。 或grid-template-columns: 100%;的解决方案grid-template-columns: 100%; 也有好处。

希望这可以帮助。