在IE行跨度和列跨度问题(Rowspan and colspan problems in IE)

所以，我需要创建表colspans和rowspans的复杂系统。你可以看一下那这里

这是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浏览器，即使我设置的所有细胞的宽度和高度，以像素为单位。

你可以看到，它应该如何在这screeshot工作。

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

如何解决大空间和问题行跨度/合并单元格系统中IE浏览器？

认为你的布局为一个9列网格，其中所述内容涵盖1,2或3栏。然后使用花车：

 #grid { width: 900px; overflow: hidden; } #grid div { float: left; } #grid .col-3-9 { width: 33.33%; } #grid .col-2-9 { width: 22.22%; } #grid .col-1-2 { width: 50%; } #grid img { display: block; width: 100%; }

 <div id="grid"> <div class="col-3-9"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg"> </div> <div class="col-2-9"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg"> </div> <div class="col-2-9"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg"> </div> <div class="col-2-9"> <div class="col-1-2"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg"> </div> <div class="col-1-2"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg"> </div> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg"> <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg"> </div> </div>