Question

在WebKit，Firefox和Opera中，您可以将各种表格元素设置为display: block，以阻止它们像表格一样显示：

http://jsfiddle.net/bHzsC/

这对于没有空间展示传统表格的小屏幕（例如iPhone）非常有用。

然而，IE 9仍然将水平相邻的表格单元格放在一起 - 它似乎不会在表格元素上表示display: block。

是否还有其他代码会阻止IE 9（或更早版本）将表格作为表格进行布局？

Answer 1

添加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;或使用适当较低的宽度或包含固定宽度的元素可以避免这种情况。

Answer 2

怎么样：

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

使用floats

可能会对您的布局产生影响

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

你能让IE 9（或更早版本）布局表格元素，好像它们是常规显示：块元素？

2 个答案: