具有多个行跨度的 IE 表会导致单元格中出现额外的空白答案

【问题标题】：IE table with multiple rowspan leads to extra white space in cells具有多个行跨度的 IE 表会导致单元格中出现额外的空白
【发布时间】：2013-10-07 03:04:34
【问题描述】：

对于一个项目，我需要使用表格。这是该项目的简化部分。能够构建任何类型的表结构对我来说很重要。我的问题是，IE 在某些情况下会在表格单元格前后添加一些额外的空白。

在 IE 中：

在 Safari/Chrome/Firefox 中正确：

感谢您的帮助！巴林特

我的代码：

<table cellpadding="0" cellspacing="0" border="1" width="656px">
      <tr>
          <td rowspan="1" colspan="1">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
          <td rowspan="2" colspan="2">
              <table style="width: 328px; height: 40px;" bgcolor="#ffff99" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
          <td rowspan="1" colspan="1">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td rowspan="2" colspan="1">
              <table style="width: 164px; height: 40px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
          <td rowspan="2" colspan="1">
              <table style="width: 164px; height: 40px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td rowspan="2" colspan="2">
              <table style="width: 328px; height: 40px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td bgcolor="#cccccc">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td>
                      </td>
                  </tr>
              </table>
          </td>
          <td bgcolor="#cccccc">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td>
                      </td>
                  </tr>
               </table>
          </td>
      </tr>
  </table>

【问题讨论】：

标签： internet-explorer html-table

【解决方案1】：

Internet Explorer 处理表格的方式多种多样，有时并没有那么好。

使用 F12 开发人员工具来确定您使用的 IE 变体。您可能希望强制 IE 进入最新版本。详情请见HTML5 doctype putting IE9 into quirks mode?

【讨论】：