Firefox 和 Safari 的 css3 flexbox 兼容性问题

Posted 2023-03-07

【中文标题】Firefox 和 Safari 的 css3 flexbox 兼容性问题

【英文标题】：css3 flexbox compatibility problems with Firefox and Safari

【发布时间】：2013-07-02 16:15:21

【问题描述】：

我正在尝试整理我的 flexbox 布局，使其与最新版本的 IE/Firefox/Safari 兼容，但我遇到了 Firefox/Safari 的问题。

建议布局：

-----------------
     header
-----------------
    |
    |
    |
nav |  section
    |
    |
    |
    |

在 Firefox 和 Safari 中，<section> 在 nav 下方

CSS：

body 
  width:50%;
  height:100%;
  display: -ms-flexbox;
  -ms-box-orient: horizontal;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;

  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;


header 
    padding-top:100px;
    -webkit-flex: 1 100%;
    -moz-flex: 1 100%;
    -ms-flex: 1 100%;
    flex: 1 100%;


nav 
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width:10%;
    height:100%;


section 
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
    width:40%;
    height:100%;

【参考方案1】：

首先，这个：

body 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;

应该是这样的：

body 
  display: -ms-flexbox;
  display: -webkit-flex;

@supports (flex-wrap: wrap)  /* hide from the incomplete Flexbox implementation in Firefox */
    body 
      display: flex;
    

这没有任何作用，因为 IE 没有 2009 Flexbox 草案的实现：

body 
  -ms-box-orient: horizontal;

您还为标准 Flexbox 草案中的属性添加了 moz 前缀，但 Firefox 实现了这些前缀免费（只有 2009 年的属性应该有 moz 前缀）。

即使您修复了所有这些问题，它仍然无法在 Safari 或 Firefox 中运行。为什么？

在 ios7 出现之前，Safari 只实现了 2009 年 Flexbox 草案。它未能实现box-lines: multiple，这就是启用该草稿的原因 Firefox 有 2009 年草案和标准草案的实现，但两种实现都不支持包装。

【讨论】：

感谢您的帮助。你会建议我如何处理 Firefox/Safari？填充物？

老实说，我建议不要使用 Flexbox 进行布局。 Windows XP 的操作系统太突出了（它的受欢迎程度排名第二），它们无法升级到 IE8 以上。如果您仍然希望使用 Flexbox，那么您必须将 nav 和 section 与一个额外的 flex 容器组合在一起并取消包装（请参阅：codepen.io/cimmanon/pen/rifzt）。

如果我要离开 Flexbox，我应该只使用普通的表格标记吗？

为什么要使用表格？表格用于表格数据，而不是布局。 ***.com/a/14220687/1652962