Question

我的网格布局适用于我需要的所有浏览器，除了Safari 10.下面的图像和文字应该放在卡片内部。 btn设置，但他们都聚集在一起。

中的问题

在IE11中正确查看image

我试图添加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

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

我相信，使其在safari10中运行的唯一选择是删除它，并使用justify-content: center;和min-height .card。

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

BOOTPLY

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

safari 10 flexbox img重叠和父母大小问题。 bootstrap 4卡

1 个答案: