在IE8浏览器的标准模式下,样式设置为table-layout:fixed的表格中的列隐藏之后,表格的宽度并不会自动resize,table中各th, td元素宽度保持不变。
而在IE7,以及chrome、firefox等现代浏览器中,表格中各列的宽度会自动重新调整。
一个简单的针对IE8浏览器的问题解决方案如下:
table.style.display = "inline-table"; window.setTimeout(function(){table.style.display = "";},0);
如果使用jQuery,可以通过下面的方式判断当前浏览器是否为IE8:
jQuery.browser.version == 8.0
效果参见下面的表格示例:
Column1 | Column2 | Column3 | Column4 | Column5 | Column6 |
---|---|---|---|---|---|
Data1 | Data2 | Data3 | Data4 | Data5 | Data6 |
Data1 | Data2 | Data3 | Data4 | Data5 | Data6 |
Data1 | Data2 | Data3 | Data4 | Data5 | Data6 |
Data1 | Data2 | Data3 | Data4 | Data5 | Data6 |
Data1 | Data2 | Data3 | Data4 | Data5 | Data6 |
参考StackOverflow问答:
http://stackoverflow.com/questions/2654103/ie8-isnt-resizing-tbody-or-thead-when-a-column-is-hidden-in-a-table-with-table
以及博文:
http://srikanthgade.blogspot.com/2010/09/ie8-standards-table-layout-fixed.html
本文链接:http://bookshadow.com/weblog/2015/10/15/ie8-standards-table-layout-fixed/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。