safari 10 flexbox img 重叠和父尺寸问题。引导 4 张卡

Question

我有一个网格布局，可以在除 Safari 10 之外的所有浏览器中使用。下面的图像和文本应该适合卡片和 btn 设置，但它们都挤在一起。

image 中的问题

IE11 中的正确视图image

这是bootply

• 我尝试添加 flex:1；在一个家长的课堂上并修复了它，但随后它在 IE11 中导致了同样的问题。

css

 .img-fluid {
width: 100%;
}

.tall {
padding: .6em 1rem 0 1rem;
}

.wide {
padding-top: .7em;
}

html

 <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 pb-3 px-2 ">
                <div class="card h-100 border border-secondary h-100 text-center">
                    <a href="#" class="btn  h-100 d-flex align-items-center justify-content-center">
                        <div>
                            <img src="http://picsum.photos/300/200" class="img-fluid wide">
                        </div>
                    </a>
                    <p class=" text-dark">Wide Img Btn<br> <span class="text-warning d-block d-md-none">Invisible save for phones Extended captions will wrap blah blah blah</span></p>
                </div>
            </div>

Answer 1

当您将height: 100%;（h-100 类）设置为锚标记时，似乎 safari10 在计算高度时有一个奇怪的逻辑。

我相信，让它在 safari10 中工作的唯一选择是删除它并使用 justify-content: center; 以及 min-height 到 .card。

对于<p class=" text-dark">，我们需要将其设为position: absolute;，并使用bottom: 0; 使其粘在容器底部。

BOOTPLY

在 Safari10、IE11 和所有浏览器的最新版本中测试。如果这有帮助，请告诉我。