Firefox中的Flex Box和响应式宽高比问题

pessimo 发表于 Dev

坏的

我在网站的布局中使用flex box模型来显示一组图像。这些图像都具有不同的纵横比，因此为了使它们具有相同的纵横比，我正在使用此技术。它在除Firefox高度崩溃的firefox以外的所有浏览器上都能正常工作。这个问题似乎与flex box模型有关，因为当display:flex适当性关闭时，div会再次采用正确的高度。

此处带有示例的codePen：http：//codepen.io/postcom/pen/eJZVLE

有人对此有任何建议吗？

的HTML

<div id="container">
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
</div>

的CSS

#container {
    width: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    background-color: yellow;
}

.link {
    display: block;
    width: 27%;
    box-sizing: border-box;
    margin: 30px;
    padding-bottom: 30%;
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: blue;
}

.link .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

错误的

添加一个额外的div似乎可以解决FF中的问题。

问题是，填充技巧不适用于FF中的flex项目，而对flex item子对象有效

#container {
  width: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;
  background-color: yellow;
}
.link {
  display: block;
  width: 27%;
  box-sizing: border-box;
  margin: 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: blue;
}
.wrapper {
  padding-bottom: 100%;
}
.link .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
}

<div id="container">
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
</div>