Почему IE визуализирует эту таблицу HTML по-разному?

Я пытаюсь собрать простой HTML-адрес электронной почты, используя старые стандарты школьного кодирования, и я ударил кирпичную стену, которую я не предвидел. Internet Explorer, даже IE 11, делает простую таблицу по-разному для всех других браузеров, которые я пробовал (Chrome, Firefox, 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 года. Это уродливо, но оно больше поддерживается почтовыми клиентами. )

Ответы

Ответ 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>

Edit:

Вот почему браузер был сбит с толку.

Вы создали таблицу с тремя полными строками. Высота суммы всех трех строк равна 250px.

Во втором столбце первая строка равна 42px, а сумма нижних двух - 208px

В третьем столбце первые две строки составляют 116px, а третья строка - 134px.

Это означает, что (ширина таблицы) первая строка определена на 42px, третья строка - 134px, но средняя строка неоднозначна в 166px, 92px, AND -18px в то же время.

Таблицы должны быть табличными, но когда вы нарушаете характер таблицы, это дерьмо снимает то, что вы получите.

Ответ 2

То, что вы испытываете, это версия rowspan проблемы с 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>

Ответ 3

Хорошо, поскольку вы заявили, что он будет использоваться для электронной почты 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).

oh, и выкрикнул ZURB для прихода с INK: http://zurb.com/ink/ (спас мне кучу неприятностей)

Ответ 4

Интересный, должен быть минимальный размер, потому что, если вы сделаете это значение больше, оно будет выглядеть так же, как и другие, например, попробуйте 200. Но IE не делает его меньше, поскольку он хочет, чтобы он был такой же высоты (или больше), чем следующий столбец.