为什么IE会以不同的方式呈现此HTML表格？ [英] Why does IE render this HTML table differently?

问题描述

我试图把一个简单的HTML电子邮件使用旧学校编码标准，我打了一个砖墙，我没有预见。 Internet Explorer，甚至是IE 11，都会以不同的方式呈现一个简单的表格，我试过的其他浏览器（Chrome，Firefox，Safari），我不知道为什么。

在布局方面，它应该看起来像这样（注意：颜色只是为了说明 - 对你的眼睛表示歉意。）：

但在IE中像这样：

HTML很简单：

 < table border =0 cellpadding =0cellspacing =0width =650bgcolor =ffffff> 
< tr> 
< td bgcolor =＃ff0000valign =topheight =250width = '30'rowspan =3> 
高度：250px 
< / td> 
< td background =images / top_2_2a.gifbgcolor =＃00ff00valign =topwidth =455height =42> 
高度：42px 
< / td> 
< td background =images / top_2_3a.gifbgcolor =＃0000ffvalign =topwidth =135height =116rowspan =2> 
高度：116px 
< / td> 
< td bgcolor =＃ff00ffvalign =topheight =250width = '30'rowspan =3> 
高度：250px 
< / td> 
< / tr> 
< tr> 
< td background =images / top_2_2b.gifbgcolor =＃00ffffvalign =topwidth =455height =208rowspan =2> 
< div> 
< div style =font-size：43px; color：＃000; font-family：arial; vertical-align：bottom> 
高度：208px 
< / div> 
< / div> 
< / td> 
< / tr> 
< tr> 
< td background =images / top_2_3b.gifbgcolor =＃ffff00valign =topwidth =135height =134> 
< div> 
< div style =padding-bottom：0px; font-size：13px; color：＃000; vertical-align：bottom; font-family：arial> 
高度：134px 
< / div> 
< / div> 
< / td> 
< / tr> 
< / table> 
  

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

我做错了事，或是IE

（注意：对于不知道的评论者，你不能在HTML电子邮件中使用浮动或绝对定位。 em

解决方案

为什么我使用的代码看起来像是从1998年开始的。它很丑陋，但它更受电子邮件客户端的支持。

您最好的打赌是嵌套表格

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

像这样

 < table border =0cellpadding =0cellspacing =0width =650bgcolor =ffffff> 
< tr> 
< td bgcolor =＃ff0000valign =topheight =250width ='30'>高度：250像素< / td> 
< td> 
< table border =0cellpadding =0cellspacing =0> 
< tr> 
< td background =images / top_2_2a.gifbgcolor =＃00ff00valign =topwidth =455height =42>高度：42px< / td> 
< / tr> 
< tr> 
< td background =images / top_2_2b.gifbgcolor =＃00ffffvalign =topwidth =455height =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 =0cellpadding =0cellspacing =0> 
< tr> 
< td background =images / top_2_3a.gifbgcolor =＃0000ffvalign =topwidth =135height =116>高度：116px< / td> 
< / tr> 
< tr> 
< td background =images / top_2_3b.gifbgcolor =＃ffff00valign =topwidth =135height =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 =＃ff00ffvalign =topheight =250width ='30'>高度：250px< / td> 
< / tr> 
< / table> 
  

编辑：

这里是浏览器混淆的原因。

您创建了一个包含3行总计的表。

在第二列中，第一行为42像素，底部的和为208像素。

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

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

表是表格，但当你打破了表的性质，这是一个胡扯的拍摄，你会得到什么。

I'm trying to put together a simple HTML email using old school coding standards and I've hit a brick wall that I didn't foresee. Internet Explorer, even IE 11, renders a simple table differently to every other browser I've tried (Chrome, Firefox, Safari) and I can't figure out why.

In terms of layout, it should look like this (note: colours are for illustration only -- apologies to your eyes!):

But in IE it looks like this:

The HTML is pretty simple:

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

Am I doing something wrong, or is IE still messing with me after all these years?

(Note: For the commenters who are unaware, you cannot use floats or absolute positioning in HTML emails. That's why I'm using code that looks like it came from 1998. It's ugly, but it's more supported by email clients.)

解决方案

Your best bet is nested tables

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

like so

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

Edit:

Here's why the browser was confused.

You have created a table with 3 total rows. The sum height of all three rows is 250px.

In the second column, the first row is 42px, and the sum of the bottom two is 208px

In the third column, the first two rows is 116px, and the third row is 134px.

Which means that (table wide) the first row is defined at 42px, the third row is at 134px but the middle row is ambiguous at 166px, 92px, AND -18px at the same time.

Tables are meant to be tabular, but when you break the nature of the table, it's a crap shoot on what you'll get.

这篇关于为什么IE会以不同的方式呈现此HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！