IE6 CSS顯示：表修復？

我正在開發一個web應用程序......不幸的是，它必須使用有史以來最糟糕的軟件，ie6。IE6 CSS顯示：表修復？

我真的很喜歡CSS display:table和display:table-cell屬性，但它當然在ie中不起作用。

有沒有人發現此修復？我一直在尋找，但沒有找到任何東西。
有條件的CSS，.htc文件，javascript ...什麼？
我真的想避免使用浮動和清除所有東西

來源

2011-03-16 ZolaKt

也許用CSS餅？ http://css3pie.com/ – Thew 2011-03-16 15:53:06

這是用於佈局，還是實際的表格數據，只要放入'

'和相關的元素都是明智的？ – nybbler2011-03-16 16:01:42

佈局，我在說的CSS屬性顯示：表，而不是HTML表 – ZolaKt 2011-03-16 16:06:32

回答

對不起。有沒有修復，使IE6支持CSS display:table。在IE6中實現這種佈局的唯一方法是實際使用<table>元素。

第一個問題：你真的需要支持IE6嗎？如果你可以簡單地放棄對它的支持，你會解決自己的一大堆問題，包括這一個。 IE6目前的全球使用率低於3％，在大多數發達國家甚至更低。

如果您仍然需要支持IE6，那麼您最明顯的解決方案就是簡單地吞下您的語義標記自豪感，並使用<table>標記。

如@Tom所述，下一個最佳解決方案是使用display:inline-block;編寫佈局。

inline-block允許您將元素定義爲塊，但仍將它們保留在文本流（默認情況下<img>標記的工作方式）。如果將它與固定的元素寬度以及行周圍的wapper div結合使用，則可以實現類似於表格的操作，儘管可能很難使其隨頁面寬度動態擴展。

圍繞此問題的一個大「陷阱」bug是inline-block僅適用於IE6/7中默認樣式爲display:inline的元素。換句話說，它適用於<span>，但不適用於<div>。不是災難，而是需要注意的事情，特別是因爲你特意詢問關於IE6的支持。除此之外，好消息是你應該能夠在沒有任何其他黑客或變通方法的情況下使用display:inline-block。

來源

2011-03-16 17:21:11 Spudley

不幸的是，我必須支持，即不是我的決定......我個人會毫不猶豫地放棄它......第二件事，我不認爲你的統計數據是有效的，幾年前，即大約50％......我真的不認爲它已經下降這麼低...不幸的是，仍然有很多人安裝XP，誰不知道什麼是瀏覽器，並使用ie6作爲默認...悲傷，但真正的 – ZolaKt 2011-03-16 18:29:17

關於您的解決方法解決方案，我認爲病態只是堅持使用浮動，因爲即使限制內聯塊 – ZolaKt 2011-03-16 18:30:29

@ZolaKt - IE **作爲一個整體**仍然在45％左右，但IE6的使用正在下降懸崖。沒有一個統計數據網站是真正準確的，但爲了總體趨勢的良好局面，我建議http://gs.statcounter.com/。他們目前在全球範圍內展示的IE6爲4％，在歐洲爲1.9％，在美國爲2.1％。其他人顯示類似的統計。但這是任意的;您需要注意*您的*網站的使用情況。如果你仍然有足夠的IE6用戶來支持他們，那麼你應該這樣做。真的，這是一個成本決定：支持IE6的成本是多少，以及你會失去多少用戶。 – Spudley 2011-03-16 18:46:43

IE不支持display：table和display：table-cell，但IE7及以下版本支持display：inline-block。使這項工作的常用方法是通過執行以下操作：

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

記住，CSS給你很多的定位功率和給予你希望你的佈局看，我也許可以給一些背景你更好的解決方案。

由於誤解讓我澄清上面的代碼。 display：-moz-inline-stack;是針對較老版本的Firefox聲明的。 zoom：1; IE有一個名爲hasLayout的屬性，這是一種觸發它的方法。 *顯示：內聯被稱爲用於隱藏來自所有非IE瀏覽器這條線的a *屬性劈

變焦：1和*顯示：內聯有效地允許塊級元素的行爲類似於內聯元素（這樣內聯塊將在IE6 +工作）

欲瞭解更多信息，請閱讀：

來源

2011-03-16 17:00:43 Tom

一個很好的一般答案，但具體的建議有些過時了。 '-moz-inline-stack'並不是必須的，除非你需要支持少於v2的Firefox，這意味着你真的不需要它。你不需要'* display：inline;'，因爲它在IE6中重載了'inline-block'。 IE6/7確實支持'inline-block'（雖然有一些'gotcha'bug）;只需要'* display：inline'來支持IE5.5。 'zoom：1'是各種IE問題的常見錯誤修正，但對'inline-block'沒有任何影響，所以我不知道這裏提到的原因。 – Spudley 2011-03-16 17:12:08

注意：默認情況下內聯元素支持內嵌塊。它不會在IE6中的div元素上工作。 – easwee 2011-03-16 17:36:59

@Spudley如果需要IE6支持，那麼我瘋狂的假設，舊版本的Firefox也將被要求。 – Tom 2011-03-16 21:15:30

相關問題