IE9下奇葩的表格空白单元格问题

最新推荐文章于 2018-03-12 17:42:34 发布

原创最新推荐文章于 2018-03-12 17:42:34 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie9 #table #whitespace #data tables

DHTML 专栏收录该内容

1 篇文章

订阅专栏

本文记录了解决在不同浏览器（FF、Chrome、IE10+）中使用Datatables插件显示表格时，因空行导致的样式问题。通过分析并删除表格中的空行，表格样式恢复正常。同时，讨论了在特定IE版本中出现类似问题的原因，并提供了排查思路。

使用Jquery＋datatables插件显示表格，在FF和Chrome浏览器及IE10＋以上版本中表格显示正常。

上代码：

<tr>
            <td>
                <label>2014-07-24</label>
            </td>
            <td>
                <label>早班－上班</label>
            </td>
            <td>
                <label>03:20</label>
            </td>
            <td>
                <label>长阳路1681号临青路</label>
            </td>
            
                
            
            
                
            
            <td>
                <label>1</label>
            </td>
            <td>
                <label>0</label>
            </td>
            <td>
                <label>1</label>
            </td>
        </tr>

看到第4个单元格后面的空行了吗？这就是“罪魁祸首”，删除掉空白行后，样式OK了。

现象上看，去掉datatables插件引用后，也可显示正常；但在其他项目中也出现过因为内容中夹杂无用的空格导致的样式变形问题，且此问题只在IE某版本中存在。

谨此记录，供查阅。