您可以讓IE 9（或更早版本）將表格元素佈置爲正常顯示：塊元素？

在WebKit的，Firefox和Opera，您可以設置各種表格元素display: block阻止他們顯示像表：您可以讓IE 9（或更早版本）將表格元素佈置爲正常顯示：塊元素？

http://jsfiddle.net/bHzsC/

這可以在小屏幕上有用的（如iPhone手機），其沒有空間展示傳統上擺放的桌子。

IE 9，但是，仍然勾畫出表格單元彼此相鄰地水平 - 它似乎沒有履行在桌子上的元素display: block。

是否有任何其他碼，從佈局表作爲錶停止IE 9（或更早）？

2012-04-03 Paul D. Waite

從很久以前類似的問題：http://stackoverflow.com/a/5091822/405015。如果你希望能夠支持它，它只會在IE7中不起作用。如果你必須處理'padding'，'box-sizing：border-box'會很有幫助。 – thirtydot 2012-04-03 09:40:26

@thirtydot heh，是的，我剛剛發現。我確實先看了一下，但正在用_IE9_搜索，而不僅僅是IE。你剛剛得到了一個+1你的答案:-) – andyb 2012-04-03 09:43:06

@andyb老問題：這很有趣，你發現了更多的我的老相關答案比我:) – thirtydot 2012-04-03 09:44:12

添加float:left;clear:left;將使IE 9的表現好一點，但每個元素的寬度將不正確。如果您將width:100%添加到混音中，則表現與Chrome和Firefox中的相同。

table, 
thead, 
tfoot, 
tbody, 
tr, 
th, 
td { 
    display:block; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float:left; 
    clear:left; 
}

編輯：這How can I make "display: block" work on a <td> in IE?之前有人問及部分覆蓋上How can I get inline-block to render consistently when applied to table cells?這相當正確地提到任何填充會導致width:100%創建水平滾動條。但是，這可以通過使用box-sizing:border-box;或通過使用適當較小的寬度或包含具有固定寬度的元素來避免。

來源

2012-04-03 09:28:38 andyb

+1 - 我沒有想到的寬度。不過你不需要'display：block'。 '浮動'爲您照顧！ – 2012-04-03 09:30:08

另外，你的個人資料圖片來自哪裏？我從小時候就玩過的一款遊戲中認出它，但我不記得它的名字。我相信這是攻擊的東西... – 2012-04-03 09:33:55

@MyHeadHurts啊，但寬度將導致滾動條問題，如果使用填充。此外，從（http://en.wikipedia.org/wiki/Day_of_the_tentacle）:-) – andyb 2012-04-03 09:40:32

如何：

table, 
thead, 
tfoot, 
tbody, 
tr, 
th, 
td { 
    float:left; 
    clear: left; 
}

它可能對你的佈局反響與它使用floats

工作例如：http://jsfiddle.net/bHzsC/1/

來源

2012-04-03 09:17:38

您可以讓IE 9（或更早版本）將表格元素佈置爲正常顯示：塊元素？

回答

相關問題