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

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;
}

编辑:之前已经问到如何让"display:block"在IE中的<td>上工作？部分覆盖在应用于表格单元格时,如何使内联块一致地呈现？非常正确地提到任何填充都会导致width:100%创建一个水平滚动条.然而,这可以box-sizing:border-box;通过使用适当较低的宽度或包含具有固定宽度的元件来避免.