css3 flexbox与Firefox和Safari的兼容性问题 [英] css3 flexbox compatibility problems with Firefox and Safari

问题描述

我试图整理我的flexbox布局，以便与最新版本的IE / Firefox / Safari兼容，我有Firefox / Safari的问题。

I'm trying to sort out my flexbox layout so it is compatible with latest versions of IE/Firefox/Safari, and I have issues with Firefox/Safari.

建议的布局：

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

在Firefox和Safari中< section> nav

In Firefox and Safari <section> is underneath 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%;
}

推荐答案

/ p>

First off, this:

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;
    }
}

具有2009年Flexbox草案的实现：

This doesn't do anything because IE doesn't have an implementation of the 2009 Flexbox draft:

body {
  -ms-box-orient: horizontal;
}

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

You've also added the moz prefix on the properties from the standard Flexbox draft, but Firefox implemented those prefix free (only the 2009 properties should have a moz prefix).

即使你修复所有这些东西，它仍然不能工作Safari或Firefox。为什么？

Even if you fix all of these things, it still won't work in Safari or Firefox. Why?

• 在iOS7发布之前，Safari只有2009年Flexbox草稿的实现。它无法实现 box-lines：multiple ，这是在草稿中实现包装的


• Firefox具有2009年草案的实施 标准草稿，但两种实现均不支持换行。

• Until iOS7 comes out, Safari only has an implementation of the 2009 Flexbox draft. It fails to implement box-lines: multiple, which is what enables wrapping in that draft
• Firefox has an implementation for the 2009 draft and the standard draft, but neither implementation supports wrapping.

这篇关于css3 flexbox与Firefox和Safari的兼容性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！