Safari 和 bootstrap 4 flexbox 错误答案

【问题标题】：Safari and bootstrap 4 flexbox errorSafari 和 bootstrap 4 flexbox 错误
【发布时间】：2017-12-04 14:41:58
【问题描述】：

Bootstrap 4 - Safari 版本 10.1.2 display:table; 和 display:table-cell; vertical-align:center; 不适用于 100% 高度 div。

<div class="test-slider">
    <div class="slide">
        <div class="row no-gutters">
            <div class="col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7">
                <img src=""/>
            </div>
            <div class="col-12 col-xs-12 col-sm-12 col-md-5 col-lg-5">
                 <div style="display:table; height:100%;">
                        <div style="display:table-cell; vertical-align: middle;">
                        <h2>Test center</h2>
                        <p>Should be centered</p>
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>

如果我在 chrome 中渲染，高度是从具有固定高度的 .test-slider 类继承的，而在 safari 中它采用内容高度而不是填充 div 的高度。有任何想法吗？我正在使用光滑的滑块。

【问题讨论】：

你对应的css是什么样子的？
它不需要 100% 的高度，即使它已设置。它有点奇怪。我有一个临时修复使用 js 计算高度并设置它。

标签： html css safari bootstrap-4 slick.js

【解决方案1】：

嗯，目前我有 Safari 11.0.1，但如果我设置下面的样式，它会垂直居中文本。

.test-slider .row {
    height: 500px;
}

仅将高度设置为.test-slider 是不够的，因为孩子们不知道他们应该填写那个高度。 “表”上设置的 100% 高度是根据其父级的高度计算的，.col-md-5 div。在您的情况下，它不知道.test-slider 的高度。

除此之外，请注意col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7 完全等同于写col-md-7。当然，col-md-5 也一样。

另外，我建议不要使用表，而是使用 Bootstrap 中已有的flexbox utility classes。这使得标记更轻。这是一个例子：

.test-slider .row {
    height: 300px;
}

.test {
    background-color: lightgray;
}

<div class="test-slider">
    <div class="slide">
        <div class="row no-gutters">
            <div class="col-md-7">
                <img src=""/>
            </div>
            <div class="test col-md-5 d-flex align-items-center">
                <div>
                    <h2 class="mb-0">Test center</h2>
                    <p class="mb-0">Should be centered</p>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

【讨论】：