为啥 IE 会以不同的方式呈现这个 HTML 表格？

Posted 2023-03-05

【中文标题】为啥 IE 会以不同的方式呈现这个 HTML 表格？

【英文标题】：Why does IE render this HTML table differently?为什么 IE 会以不同的方式呈现这个 HTML 表格？

【发布时间】：2014-01-07 03:40:26

【问题描述】：

我正在尝试使用老式的编码标准来整理一封简单的 html 电子邮件，但我遇到了我没有预见到的一堵砖墙。 Internet Explorer，甚至是 IE 11，呈现一个简单表格的方式与我尝试过的所有其他浏览器（Chrome、Firefox、Safari）不同，我不知道为什么。

在布局方面，它应该是这样的（注意：颜色仅用于说明——请见谅！）：

但在 IE 中它看起来像这样：

HTML 非常简单：

<table border="0" cellpadding="0" cellspacing="0"  bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top"  width='30' rowspan="3">
            Height: 250px
        </td>
        <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top"  >
            Height: 42px
        </td>
        <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top"   rowspan="2">
            Height: 116px
        </td>
        <td bgcolor="#ff00ff" valign="top"  width='30' rowspan="3">
            Height: 250px
        </td>
    </tr>
    <tr>
        <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top"   rowspan="2">
          <div>                            
              <div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
                Height: 208px
            </div>
          </div>
        </td>
    </tr>
    <tr>
        <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top"  >
          <div>
          <div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
              Height: 134px
            </div>
              </div>
        </td>                            
    </tr>
</table>

JSFiddle: http://jsfiddle.net/mCLDh/

是我做错了什么，还是 IE 这么多年还在惹我？

（注意：对于不知道的评论者，您不能在 HTML 电子邮件中使用浮动或绝对定位。这就是我使用看起来像是来自 1998 年的代码的原因。它很丑，但是它更受电子邮件客户端的支持。）

【问题讨论】：

+1 到 这么多年 IE 还在惹我吗？ 也许是吧！

W3C 浏览器标准是许多浏览器开发团队遵守的标准。 W3C 浏览器标准以幽默漫画的形式出现在 IE 开发人员的办公室中。

根据您想要的输出，我不一定认为表格是在这种情况下使用的合适元素。

定位的 div 或其他语义上合适的块级元素。

@MrSlayer 我很想使用浮动（不是绝对定位），但我不能——因为这是一封 HTML 电子邮件。大多数电子邮件客户端不支持这些功能。这是我使用可怕、丑陋的旧学校代码的唯一原因。

【参考方案1】：

有趣，必须是最小尺寸的东西，因为如果你把这个值变大，它会和其他人一样呈现——例如尝试 200。但是，IE 并没有使它更小，因为它希望它与下一列的高度相同（或更大）。

【参考方案2】：

好的，既然您声明它将用于 html 电子邮件：请勿使用 colspan、rowspan。将表格拆分为：（不是它不漂亮，但它会为您节省一大堆问题）

<table>
    <tr>
        <td>
            250px
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        height 42px
                    </td>
                </tr>
                <tr>
                    <td>
                        height 208px
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        height 116px
                    </td>
                </tr>
                <tr>
                    <td>
                        height 134px
                    </td>
                </tr>
            </table>
        </td>
        <td>
            250px
        </td>
    </tr>
</table>

（如果这可以更容易地完成，请纠正我，是的，内表可以用 div 替换。）

哦，为 ZURB 提出 INK 大喊一声：http://zurb.com/ink/（为我省去了很多麻烦）

【讨论】：

问题实际上来自于在 IE 中查看基于 Web 的邮件客户端中的电子邮件——奇怪的是，它在大多数其他地方都有效。我不敢相信 IE11 呈现错误...：-/

【参考方案3】：

您最好的选择是嵌套表格

http://jsfiddle.net/3L8qL/1/

像这样

<table border="0" cellpadding="0" cellspacing="0"  bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top"  width='30'>Height: 250px</td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top"  >Height: 42px</td>
                </tr>
                <tr>
                    <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top"   >
                        <div>
                            <div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">Height: 208px</div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top"   >Height: 116px</td>
                </tr>
                <tr>
                    <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top"  >
                        <div>
                            <div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">Height: 134px</div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td bgcolor="#ff00ff" valign="top"  width='30'>Height: 250px</td>
    </tr>
</table>

编辑：

这就是浏览器感到困惑的原因。

您创建了一个总共有 3 行的表。三行总高度为250px。

在第二列中，第一行是42px，下面两行之和是208px

在第三列，前两行是116px，第三行是134px。

这意味着（表宽）第一行定义为 42px，第三行定义为 134px，但中间行同时定义为 166px、92px 和 -18px。

表格本来应该是表格的，但是当你打破表格的性质时，你会得到什么。

【讨论】：

啊。我不敢相信这是 Internet Explorer 惹恼了我。那是怎么回事？ :(

IE 不是在惹你。表格应该是表格的。您正在创建模糊的行高，分为 3 个可能的不匹配高度的不均匀组合。我更新了我的答案以更详细地解释这一点。

这很有帮助，谢谢。仍然奇怪的是，这种行为在 10 年前没有被 W3C 标准化。

@TheMonk W3C DID 在几年前完成了。您已经知道 IE 是唯一一个与其他浏览器不同的浏览器。那么为什么你需要为 IE 来“修复”你的标记呢？这不是向我们表明 IE 是问题而不是您的标记吗？当然可以！你永远不能相信 IE 做任何事情都是正确的。

我不是有意冒犯你，但你创建的表格不标准。正确使用colspan 和rowspan 绝不应该引入歧义。行和列应具有定义的表宽维度。那是一张标准的桌子。当您引入跨度时，您应该只组合两个单元格。并且该合并单元格应该只是表宽行/列定义的维度的总和。 Excel 是一个很好的工具来展示它应该如何工作。打开excel，合并单元格。这就是“应该”的跨度，只需合并单元格。

【参考方案4】：

您遇到的是 the Outlook issue pointed out here 的行跨版本。

嵌套表格是合乎逻辑的选择，但是，您可以通过在左侧添加空单元格来强制执行行高，从而使 Outlook 运行正常。

<table border="0" cellpadding="0" cellspacing="0"  bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top"  width='0'><!-- Empty cell for outlook -->
        </td>
        <td bgcolor="#ff0000" valign="top"  width='30' rowspan="3">
            Height: 250px
        </td>
        <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top"  >
            Height: 42px
        </td>
        <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top"   rowspan="2">
            Height: 116px
        </td>
        <td bgcolor="#ff00ff" valign="top"  width='30' rowspan="3">
            Height: 250px
        </td>
    </tr>
    <tr>
        <td bgcolor="#ff0000" valign="top"  width='0'><!-- Empty cell for outlook -->
        </td>
        <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top"   rowspan="2">
          <div>
              <div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
                Height: 208px
            </div>
          </div>
        </td>
    </tr>
    <tr>
        <td bgcolor="#ff0000" valign="top"  width='0'><!-- Empty cell for outlook -->
        </td>
        <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top"  >
          <div>
          <div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
              Height: 134px
            </div>
              </div>
        </td>
    </tr>
</table>