IE中的Rowspan和colspan问题

Question

所以，我需要创建具有复杂的colspans和rowpans系统的表。您可以查看here

这是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中正常工作。

你可以看到，它如何在这个screehot上工作。

小空间现在无关紧要。我将背景设置为粉红色并添加黑色边框以便更好地理解。

如何修复IE中的rowspan / colspan系统的大空间和问题？

Answer 1

将您的布局视为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>