为什么IE以不同的方式呈现此HTML表格？

时间：2013-12-18 19:42:25

标签： html css internet-explorer html-table html-email

我正在尝试使用旧的学校编码标准整理一个简单的HTML电子邮件，而且我已经碰到了一块我没想过的砖墙。 Internet Explorer，甚至是IE 11，渲染了一个简单的表格，与我尝试过的其他浏览器不同（Chrome，Firefox，Safari），我无法弄清楚原因。

在布局方面，它应该如下所示（注意：颜色仅供参考 - 向您致歉！）：

enter image description here

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

enter image description here

HTML非常简单：

<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
            Height: 250px
        </td>
        <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
            Height: 42px
        </td>
        <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
            Height: 116px
        </td>
        <td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
            Height: 250px
        </td>
    </tr>
    <tr>
        <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" 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" width="135" height="134">
          <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年。它很丑，但是它受到电子邮件客户端的支持。）

4 个答案:

答案 0 :(得分：2)

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

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

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

答案 1 :(得分：1)

好的，因为你声明它将用于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/（救了我一大堆麻烦）

答案 2 :(得分：1)

你最好的选择是嵌套表格

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

喜欢这样

<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top" height="250" 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" width="455" height="42">Height: 42px</td>
                </tr>
                <tr>
                    <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" >
                        <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" width="135" height="116" >Height: 116px</td>
                </tr>
                <tr>
                    <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
                        <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" height="250" width='30'>Height: 250px</td>
    </tr>
</table>

修改

这就是为什么浏览器感到困惑。

您已创建一个包含3行的表格。所有三行的总高度为250px。

在第二列中，第一行是42px，底部两行的总和是208px

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

这意味着（表格宽度）第一行定义为42px，第三行定义为134px，但中间行不明确地分别为166px，92px和AND -18px。

表格应该是表格式的，但是当你打破桌子的性质时，它就是你将会得到的垃圾。

答案 3 :(得分：0)

有趣的是，必须是最小尺寸的东西，因为如果你将该值变大，它将呈现与其他值相同的 - 例如尝试200。但是，IE并没有让它变小，因为它希望它与下一列的高度相同（或更大）。

相关问题
最新问题