CSS Flexbox將在IE10

在IE10不能正常工作，此代碼不能正常工作：CSS Flexbox將在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。

來源

2013-08-02 JacobTheDev

[IE靈活框模型不工作]的可能重複（http://stackoverflow.com/questions/16487884/ie-flexible-box-model-not-working） – cimmanon

不只是應用隨機應用前綴，它由於多個Flexbox草稿實施不起作用：https：//gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon

Flexbox瀏覽器支持：http://stackoverflow.com/a/35137869/3597276 –

在IE中尚未（完全）本機支持Flex佈局模式。 IE10實現了該規範的「補間」版本，該規範並不完全是最近的，但仍然有效。

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

這個CSS-技巧文章對跨瀏覽器的使用Flexbox的（包括IE）的一些建議： http://css-tricks.com/using-flexbox/

編輯：略偏多的研究之後，IE10 Flexbox的佈局模式，實現電流在2012年3月W3C規範草案：http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

最目前的草案是一年左右的時間更近：http://dev.w3.org/csswg/css-flexbox/

來源

2013-08-02 14:32:57 Ennui

舊版本支持IE10，看看你發佈的鏈接中的註釋[1]。 – JacobTheDev

是的，有一些'-ms-'前綴的flexbox供應商屬性，但據我所知它們基於CSS3 flexbox規範的過時版本（除非該MDN信息過時，這是可能的）。 – Ennui

我不在乎它是否是舊規格，如果它起作用，至少部分起作用，那很好。我試圖調整您發佈的CSS技巧文章中的內容，如果它修復了它，就會報告回來。 – JacobTheDev

正如Ennui提到的那樣，IE 10支持前綴爲-ms的Flexbox（IE 11支持前置）。我可以在你的代碼中看到的錯誤是：

你應該有display: -ms-flexbox代替display: -ms-flex
我想你應該指定所有3個flex值，比如flex: 0 1 auto避免歧義

所以最後更新的代碼是...

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

    /* Direction defaults to 'row', so not really necessary to specify */ 
    -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; 

    /* Flex should have 3 values which is shorthand for 
     <flex-grow> <flex-shrink> <flex-basis> */ 
    -webkit-flex: 1 1 auto; 
    -moz-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    -o-flex: 1 1 auto; 
    flex: 1 1 auto; 

    /* I don't think you need 'display: flex' on child elements */
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
    /**/ 
}

來源

2015-07-17 06:30:14

正確 - 你**不需要顯示：flex在兒童上（''）。它的**顯示：包含元素上的flex ** - 切換flexbox - 和** flex：... **指定大小等。 –

upvoted，指定在我的情況下工作的3個值。 –

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：

（中間人）指[2012]奇數非官方的語法（如顯示：Flexbox的;）

來源

2015-10-22 09:42:50 Ben

（'第一篇文章'評論）鏈接只有答案是不鼓勵的（因爲鏈接目標可以消失）。添加鏈接是很好的，但是一點信息（理想情況下足以回答問題）是更好的練習。謝謝！。 –

我的工作仍然不起作用https://jsfiddle.net/1drzxLa5/4/ – user2814546

請注意，彎曲的物品應該是顯示：塊;在IE10中。

來源

2017-05-26 05:17:21 rappongy

它幫了我很多 – C0ZEN

非常蹩腳，這是事實，但在這裏很好的解決！ – AtLeastTheresToast

CSS Flexbox將在IE10

回答

相關問題