2

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

火狐截图

4

1 回答 1

3

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

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

  1. Chrome基于widthflex-items解析

  2. Firefox基于heightflex-items解析

请参阅CSS Flexbox Spec中的警告：

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

理想情况下，您需要考虑另一种方式 - 也许作为一种修复，您可以查看单位而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>

于 2016-12-18T07:50:53.617 回答