为什么IE渲染此HTML表格不同？(Why does IE render this HTML tab

我想放在一起使用老同学编码标准的简单HTML电子邮件和我撞了南墙，我没有预见到。 IE浏览器，甚至IE 11，呈现一个简单的表格不同，以其他浏览器我试过（浏览器，火狐，Safari浏览器），我想不通为什么。

在布局方面，它应该是这样的（注：颜色仅仅是为了说明- 对不住你的眼睛！）：

但在IE它看起来像这样：

该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年来这是丑陋的，但它更多的电子邮件客户端支持。）

Answer 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个共行的表。所有三排的总和高度为250像素。

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

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

这意味着（表宽）中的第一行是在42PX定义，第三行是在134px但中间行是不明确的，在166px，92px，并在同一时间-18px。

表意为板状，但是当你打破了表的性质，这是你会得到什么废话拍摄。

Answer 2:

你遇到的是的行跨度版本的Outlook中的问题指出了这里。

嵌套表是合乎逻辑的选择，但是，你可以得到你的代码中加入左侧空单元格执行行高度，使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>

Answer 3:

好吧，既然你说，这将是用于HTML电子邮件：不要使用列跨度，行跨度。在拆表了：（它是不是不漂亮，但它会为你节省公吨狗屎吨的问题）

<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>

（纠正我，如果可以做到这一点更容易，是的，内表可申报单进行更换。）

哦，对于未来与墨喊出ZURB： http://zurb.com/ink/ （麻烦救了我堆）