Question

我正在尝试为我的某个网页实现流畅的图像背景。它在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

Answer 1

问题是为flex-items提供的padding-top: 50%！

Margin s / padding通常是针对包含块的width而非height解析的。但是在flexbox的情况下，用户代理（浏览器）之间存在一些混淆 - 我想：

Chrome 根据width的flex-items
Firefox 根据height的flex-items

请参阅CSS Flexbox Spec中的警告：

作者应避免在flex上使用填充或边距的百分比完全是项目，因为他们将在不同的行为浏览器。

理想情况下，您需要考虑另一种方式 - 也许作为一种解决方法，您可以使用padding而不是百分比的视口单位，而您不需要{ {1}} - 请参阅下面的演示：

＆＃13;

height: 0

＆＃13;

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

＆＃13;

CSS流体图像背景在Firefox浏览器中不起作用

1 个答案: