Flexbox 和 Firefox 弹性基础

Question

我一直在对我的 flexbox 布局进行一些浏览器测试，它在除 Firefox 之外的所有常青浏览器中看起来都很棒。它应该看起来像这样 - 所有 Grid-Cell 项目都根据项目内容被赋予自动弹性基础。 但是在 Firefox 51 (macOS) 上，它都是一个巨大的单列。

这是一个 Codepen：http://codepen.io/toddsby/pen/jyZabo 以及完整示例。

这是我正在使用的代码

CSS

.Grid {
  display: -moz-box;
  display: -ms-flexbox;  
  display: -webkit-flex;  
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid-fit > .Grid-cell {
  -webkit-flex: 0 0 auto; 
  -ms-flex: 0 0 auto; 
  flex: 0 0 auto;
}

HTML

<ul class="Grid Grid-fit">
  <li class="Grid-cell">
    ...{content}
  </li>
</ul>

我查看了Philip Walton's Flexbugs，但这些建议都没有起到任何作用。还有其他人遇到这个吗？非常感谢任何帮助！

Answer 1

问题在于 svg 百分比，因为它们是浮动的，所以没有考虑尺寸：

svg {
  width:100%;
  height:100%;
}

将其更改为所需的px，但请注意并非所有浏览器都呈现相同的 svg：

svg {
  width: 300px;
  height: 300px;
}

这是一个在所有浏览器中维护布局的代码笔，尽管由于 svg 高度，Firefox 的底部边距更多。

还要注意 Michael_B 提到的 .Grid-cell 错字。

http://codepen.io/anon/pen/MJQBNJ

这是 Safari：

您可以通过降低高度来缩小行间距，比如说200px：

但 Firefox 不会让你只影响高度，还会减少宽度：

因此，您可以尝试通过删除 svg 上的 preserveAspectRatio="xMinYMin meet" 并重新设置样式来解决该差距，或者将其保留在所有浏览器中，并保持适度差距：

Answer 2

解决方案

关键是@Syden 提到了以不同方式处理 SVG 渲染的浏览器。看来 Firefox 需要一个 height 属性才能正确呈现元素。破坏布局的简单解决方案是使用 max-height 属性更新 .item svg css 选择器，如下所示：

.item svg {
  float: left;
  width: 60%;
  max-height: 300px;
}

这是 Codepen 上带有错误修复的完整代码示例： http://codepen.io/toddsby/pen/PWRqXO

Firefox 现在可以正确呈现布局：

相关说明：以下是 SVG preserveAspectRatio 工作原理的一个很好的解释：http://unmatchedstyle.com/news/svg-and-the-preserveaspectratio-property.php

Answer 3

在您的演示中，一个键选择器不起作用：

.Grid-cell (CSS) vs .Grid-Cell (HTML)

因此，无论如何，flex: 0 0 auto 不起作用。

修复后，尝试使用flex: 1 而不是flex: 0 0 auto。