48

IE10 では、このコードは正しく機能しません。

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;
}

起こるべきことは、input[type=submit]幅が 31px で、input[type=text]内の残りの利用可能なスペースを占有することですform。何が起こるかはinput[type=text]、何らかの理由でデフォルトが 263px になるだけです。

これは、Chrome と Firefox で正常に動作します。

4

3 に答える 3

43

Flex レイアウト モードは、IE ではまだ (完全に) ネイティブにサポートされていません。IE10 は仕様の「トゥイーン」バージョンを実装していますが、これは完全に最新のものではありませんが、まだ機能しています。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

この CSS-Tricks の記事には、フレックスボックス (IE を含む) のクロスブラウザー使用に関するアドバイスがあります: http://css-tricks.com/using-flexbox/

編集: もう少し調査した後、2012 年 3 月の W3C ドラフト仕様に合わせて実装された IE10 フレックスボックス レイアウト モード: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

最新のドラフトは 1 年ほど前のものです: http://dev.w3.org/csswg/css-flexbox/

于 2013-08-02T14:32:57.470 に答える
11

IE10 は古い構文を使用しています。そう：

display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */

css-tricks.com/snippets/css/a-guide-to-flexboxを参照してください:

(tweener) は [2012] からの奇妙な非公式構文を意味します (例: display: flexbox;)

于 2015-10-22T09:42:50.643 に答える