6

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

1 に答える 1

9

まず、これ：

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 ドラフトと標準ドラフトの実装がありますが、どちらの実装もラッピングをサポートしていません。
于 2013-07-04T16:25:21.647 に答える