3

在尝试了 css3 flex-box proporty 之后，我很快注意到 Chrome 和 Firefox 的一些差异。

特别是：如果您在一个应该是 flex 的元素上设置宽度，firefox 将根据它的需要来调整元素，它会考虑宽度样式，但它只是一个变量。

Chrome会充分尊重with风格，

一个例子：

<div id="box">
  <div class="flex-box">Test</div>
  <div class="flex-box">Test Text</div>
</div>

如果框内的 2 个 div 分配了相同的宽度，则 chrome 将使它们的大小相同。Firefox 将重新考虑第二个 div 需要更多空间，因此它会得到更多分配。

谁是对的？

4

3 回答 3

3

请记住，flex 不适用于宽度，它适用于确定最小内在宽度后的可用空间。正如 www-style mailing list 所指出的，这在几种常见情况下会产生违反直觉的结果。我发现，除非您想要 CSS 重新排序或多行（尚未在 Firefox 和 Chrome 中实现），否则您认为您想要使用display: box并且box-flex真正想要使用display: table和display: table-cell.

但回到您的实际问题：如果您设置宽度为像素，我发现 Firefox 和 Chrome 显示相同，但​​如果您将宽度设置为百分比，则不是。就目前哪个浏览器正确执行此操作而言，可以肯定的是 Firefox 正在实现规范的最初意图，因为原始规范描述了 XUL 属性的作用，而 XUL 属性是这一切的基础。正如其他人所提到的，最终规范是否最终符合这一初衷尚不清楚。

于 2011-08-25T22:48:53.363 回答
1

我认为任何浏览器都没有对错，因为 flexbox 仍然是一个工作草案。在任何时候，规范都可能改变并呈现另一个浏览器的对错。

http://www.w3.org/TR/css3-flexbox/

于 2011-08-25T09:35:55.277 回答
1

我不同意 robertc 的说法“但回到您的实际问题：如果您以像素为单位设置宽度，我发现 Firefox 和 Chrome 的显示相同，但​​如果您将宽度设置为百分比，则不会。”

我目前正在使用 flexbox 试图展示将一个相当繁重的 JS 和 CSS 站点转换为一个非常简单的 HTML/CSS3 站点是多么简单。一旦得出关于以像素为单位设置宽度的结论：

#main {
  display: box;
}

#main > section {
  width: 120px;
  padding: 10px;
  border: 5px solid #000;
}

在 chrome 中，总宽度 = 120 + 20 + 10 = 150px 在 ff 中，总宽度 = 120px（20px 填充在 120 内，10px 边框也在）

我发现的另一个不一致之处是，在 chrome 中，#main 是贪婪的，并且占用 100%，正如您可能预期的那样。在 Firefox 中，您需要在#main 上设置为 100% 以使其按预期运行。

我仍在努力消除所有支持的浏览器中的所有差异，当我有更多内容要添加时，我会尝试发布。可悲的是，尽管他的 flexbox 模型很酷，也很简单，但它却很不协调。

还有一件事，使用 CSS 过渡来更改尺寸适用于明确定义的尺寸（即像素）......但如果尺寸是由盒子的 flex 定义的，动画只是在 flex 值之间跳转......平滑（不过，您可以使用 500 和 100 的 flex，而不是 5 和 1 的弯曲）。事实上，chrome 不会在 flex 值之间进行动画处理，只会跳转。另一方面，FF 很好地做到了这一点。

我只是真的希望事情进展到 FF 处理 flexbox 的方式，虽然 chrome 很接近，但我只是不同意某些事情的处理方式，而且 flex 值之间缺乏动画简直糟透了。

于 2012-02-04T23:31:34.707 回答