CSS流体图像背景在Firefox浏览器中不起作用[重复]答案

【问题标题】：CSS fluid image background not working in Firefox browser [duplicate]CSS流体图像背景在Firefox浏览器中不起作用[重复]
【发布时间】：2017-05-03 12:56:51
【问题描述】：

我正在尝试为我的一个网页实现流畅的图像背景。它在 Chrome 中完美运行，但我无法在 Firefox 中运行。我有两个正方形的 png 图像，当浏览器窗口调整大小时，它们会按比例调整大小。

这是 html：

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Test Flex</title>
</head>
<body>
<div id="parent_div">
    <div id="bluesquare_div"></div>
    <div id="yellowsquare_div"></div>
</div>
</body>
</html>

这是 CSS：

body{
    background: #444444;
}

#parent_div{
    display: flex;
}

#bluesquare_div{
    width: 50%;
    background: url("bluesquare.png");
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%;
    flex-grow: 1;
}


#yellowsquare_div{
    width: 50%;
    background: url("yellowsquare.png");
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%;
    flex-grow: 1;
}

问题是我在 Firefox 中看不到任何输出。如果我不使用display:flex那么我可以在Firefox中看到两个方块，但是我的网页需要使用flexbox，所以我不能放弃它。

有人知道为什么它不能在 Firefox 中运行吗？

这是 Chrome 版本的屏幕截图：55.0.2883.87 m

这是 Firefox 版本的屏幕截图：50.1.0

【问题讨论】：

在挖掘更多，刚刚遇到这个：stackoverflow.com/questions/33502702/…

标签： html css flexbox fluid-images

【解决方案1】：

问题是为弹性项目提供的padding-top: 50%！

Margins / paddings 通常根据包含块的width 而不是height 解析。但是在flexbox 的情况下，用户代理（浏览器）之间存在一些混淆 - 我猜：

Chrome 根据弹性项目的width 解析
Firefox 解析基于弹性项目的height

查看CSS Flexbox Spec中的警告：

作者应避免在 flex 的填充或边距中使用百分比项目完全不同，因为它们会在不同的环境中获得不同的行为浏览器。

理想情况下，您需要考虑另一种方式 - 也许作为一种解决方法，您可以 viewport 单位为 padding 而不是百分比，并且您不需要 height: 0 - 请参见下面的演示：

body {
  background: #444444;
}
#parent_div {
  display: flex;
}
#bluesquare_div {
  width: 50%;
  background: url("http://placehold.it/100x100");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50vh;
  flex-grow: 1;
}
#yellowsquare_div {
  width: 50%;
  background: url("http://placehold.it/100x100");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50vh;
  flex-grow: 1;
}

<div id="parent_div">
  <div id="bluesquare_div"></div>
  <div id="yellowsquare_div"></div>
</div>

【讨论】：