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

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

问题在一个

IE11中的正确视图

这是一个

• 我尝试添加flex:1；在一个班级中，一个家长和这修复了它，但它会导致同样的问题，在IE11

css

html

Wide Img Btn
手机不可见保存扩展字幕将包装废话废话废话

当您设置

高度：100%时，safari10在计算高度时似乎有一个奇怪的逻辑（
h-100
class）到锚定标签

我相信，让它在safari10中工作的唯一选择是删除它并使用
justify content:center
以及
最小高度
到
卡

对于
我们需要将其设置为
位置：绝对并使用
底部：0
使其粘在容器底部


在Safari10、IE11和所有浏览器的最新版本中测试。请让我知道这是否有帮助。
Safari中通常存在浏览器缓存问题。清除缓存。我正在使用一个在线服务-lambdatest.com-它使用一个新的浏览器启动每个会话。我没有苹果电脑。你在Safari 10中测试过吗？那么，你的答案就在那里了……这是什么意思？我不知道你是不是说远程服务器没有清除缓存，你不喜欢lambdatest，我应该拥有一台mac？我在另一个服务上尝试了这个，结果是一样的，它不是浏览器缓存。我查看了引导程序，感谢你的努力！当屏幕很窄时，它会对布局产生一些奇怪的影响。在大屏幕上的卡片顶部有很多额外的空间，标题与手机上的图片重叠。
 .img-fluid {
width: 100%;
}

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

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

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