javascript - Flexbox 仅适用于 Chrome

Question

This flexbox似乎只适用于 Chrome。我广泛使用它并尝试应用在 https://github.com/philipwalton/flexbugs 中找到的各种修复程序

注意:JavaScript 用于根据背景图像高度调整其大小。

我很好奇是否有人可以使它在另一个浏览器中同样工作。感谢阅读。

必填代码:

CSS:

.section-1 {
    background: url("http://img01.deviantart.net/cb2e/i/2011/323/0/3/background_05_1600x1200_by_frostbo-d42mpk5.png") no-repeat;
    background-attachment: scroll;
    background-size: contain;
    position: relative;
    color: #fff;
    height: 100%;
    margin: 0;
    padding: 0;
}
.flex-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid red;
}

JavaScript:

var img = new Image();
var section = document.getElementsByClassName("section-1")[0];
var flex = document.getElementsByClassName("flex-container")[0];
img.src = window.getComputedStyle(section, null).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize() {
    var bgHeight = section.offsetWidth * img.height / img.width;
    console.log(bgHeight);
    section.style.height = bgHeight + 'px';
    flex.style.height = bgHeight + 'px';
}
window.onresize = resize;
resize();

Answer 1

由于您在 <section> 上使用百分比高度和 .flex-container div ，您还需要为所有父元素指定高度，直到并包括 body和根元素 ( html )。

将此添加到您的 CSS:

html, body { height: 100%; }

演示:https://jsfiddle.net/w5e7c93n/20/

有关详细信息，请参阅:Working with the CSS height property and percentage values