CSS3 - 如何在internet-explorer-8上水平顯示HTML5元素？

我做了一個關於如何設置水平顯示元素的頁面的教程，它在FF和Chrome中可以正常工作，但在IE8中不能正常工作。CSS3 - 如何在internet-explorer-8上水平顯示HTML5元素？

它在FF和Chrome中水平渲染元素，在IE8中垂直渲染元素。我想「box-orient：horizontal」會爲IE8設置佈局。

我知道IE8不支持很多HTML5和CSS3功能，但我已經使用PIE在此瀏覽器上顯示帶有圓角的框。我假設IE8會支持基本的功能，例如水平顯示元素。

#box-wrap-inner { 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 

    -webkit-box-align: center; 
    -moz-box-align: center; 
    box-align: center; 

    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    box-direction: normal; 

    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    box-pack: center; 

} 

#box1 { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 

    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    box-ordinal-group: 1; 
} 

#box2 { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 

    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    box-ordinal-group: 2; 
} 

#box3 { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 

    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3; 
    box-ordinal-group: 3; 
}

來源

2012-12-07 Andre oZaca

只是一個注意事項 - 鑑於這個特殊功能的粗略支持，在做沙盤/遊樂場以外的任何事情時，使用舊技術可能會更好一些。甚至IE10和Safari都沒有這樣做，甚至Firefox也有一些相當重大的bug（不支持百分比寬度）。 – Shauna

的flexbox module是相當新的，在IE8和IE9不支持（和IE10僅一箇舊版本的規格都與前綴-ms支持） ~~，不能由PIE模擬，你需要一些手工像表格這樣的解決方法或者需要忍受它在Internet Explorer中損壞的事實（通常情況很糟糕 - 它們的市場份額仍然很高）。~~

Support Chart

有一個shim available，使其在IE瀏覽器。一般來說，如果您遇到一些較新的HTML5/CSS-Stuff問題，該網站非常有用：Modernizr Polyfill List。

編輯：

它候選推薦標準的現在的狀態，所以你可以指望它很快成爲瀏覽器相當穩定和可用。 FF21已經放棄了前綴，IE10現在可以用於win7，所以真的可以開始使用這個模塊。

來源

2012-12-07 13:50:40 Christoph

+1 flexie是一個很好的發現，正是我所期待的 –

根據MDN documentation：

的Internet Explorer 10和Safari瀏覽器支持該規範的舊版本不兼容草案。他們尚未更新以支持最終版本。

如果IE10還沒有得到它的權利呢，你不會是能夠做到這一點的IE8。

來源

2012-12-07 13:51:53 Dennis

沒有一個新的善良工程。使用特定的樣式表並浮動元素。

沒有看到你的風格，我不能告訴你具體是什麼，對......但這是一個嘗試和真正的方法。只是不要忘記清理你的花車！

來源

2012-12-07 13:56:38 albert

有一點需要記住的是，IE9不支持這個特殊功能，IE10支持舊版本。另外，MS使用IE10刪除了條件註釋，所以你不能使用這個技巧來使它像老版本那樣行事。 – Shauna

你在說什麼功能？問題是關於ie8，雖然花車會在9和10上運行，幾乎所有的都是。我意識到ie10放棄了對條件的支持，但是，這個問題又是關於ie8的。您可以通過媒體查詢或使用@cc_on來定位ie10，它與（atm）條件非常相似。關於@cc_on只有不好的一面是它在Windows Store中不受支持。 – albert

它不支持靈活的框模型的東西（也沒有Safari，真的，Firefox有它自己的錯誤）。 http://caniuse.com/#feat=flexbox另請參閱Christoph的回答和我對這個問題的評論。 – Shauna

CSS3 - 如何在internet-explorer-8上水平顯示HTML5元素？

回答

相關問題