Css IE中的Rowspan和colspan问题

所以，我需要用复杂的列跨度和行跨度系统创建表。你可以看看

这是html：

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 900px;">
<tr>
    <td colspan="3" rowspan="3" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="3" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg" style="width: 100%;" />
    </td>
    <td colspan="1" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg" style="width: 100%;" />
    </td>
    <td colspan="1" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="3" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg" style="width: 100%;" />
    </td>
</tr>

即使我以像素为单位设置所有单元格的宽度和高度，它在IE中也无法正常工作

你可以看到，它应该如何在这个屏幕上工作

小空间现在不重要了。为了更好地理解，我将背景设置为粉红色，并添加了黑色边框

如何解决IE中rowspan/colspan系统的大空间和问题

---

将您的布局想象为一个9列的网格，其中内容跨越1、2或3列。然后使用浮动：

#网格{
宽度：900px；
溢出：隐藏；
}
#网格分区{
浮动：左；
}
#网格col-3-9{
宽度：33.33%；
}
#网格col-2-9{
宽度：22.22%；
}
#网格col-1-2{
宽度：50%；
}
#网格img{
显示：块；
宽度：100%；
}

最有趣的是，我可以设置td{vertical align:bottom；}并且顶部只有空格…您正在测试哪个版本的IE？您可以提供任何想法…我将对此进行明确的研究，但我最初的建议是，您不要对非表格数据使用表格。表格不是用于布局的，因此在使用表格时，您可能会遇到布局问题。是的，我理解表格的概念，但我确实需要像屏幕截图一样放置图像。。正如我所知道的，现在有了colspan/rowspan模拟用于带桌面显示的DIV（老兄，你太棒了！非常感谢！