css – 你能让IE 9(或更早版本)布局表格元素,好像它们是常规显示：块元素？

在WebKit,Firefox和Opera中,您可以设置要显示的各种表元素：阻止它们显示如表：

> http://jsfiddle.net/bHzsC/

这对于没有空间来显示传统布局的较小屏幕(例如,iPhone)是有用的.

但是,IE 9仍然将表格单元格水平放置在彼此旁边 – 它似乎不尊重显示：表格元素上的块.

是否还有其他代码可以阻止IE 9(或更早版本)将表格作为表格进行布局？

最佳答案

添加float：left; clear：left;将使IE 9表现得更好,但每个元素的宽度将不正确.如果您将宽度：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 之前被询问并在How can I get inline-block to render consistently when applied to table cells?部分覆盖,这正确地提到任何填充将导致宽度：100％来创建水平滚动条.但是,使用Box-sizing：border-Box;或使用适当的较低宽度或包含具有固定宽度的元素可以避免这种情况.