Проблема рендеринга Outlook 2013: вложенная таблица обрезает соседний текст

При разработке html-рассылок по электронной почте я часто использую структуру, подобную следующей:

<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
  <td>
        <table border="0" align="left">
        <tbody>
        <tr>
              <td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
        </tr>
        </tbody>
        </table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>

When viewed in a browser, the result looks like this:

просмотрено в браузере

но при отображении в Outlook 2013 крайний левый текст в основной (желтой) таблице обрезается:

создано Outlook 2013

Есть ли объяснение или обходной путь для этого?

(Обычно я помещал изображение вместо текста во внутреннюю (розовую) таблицу. Это позволяет создать дизайн, в котором основной (желтый) текст кажется обтекающим изображение. Будь то изображение или текст, результат будет одинаковым. текст в основной (желтой) таблице обрезан, как показано здесь.)


html html-email html-rendering outlook-2013
person jalperin    schedule 22.03.2013    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Попробуйте установить выравнивание слева в таблице заголовков, в моем коде это будет работать во всех клиентах. Проверено лакмусовой бумажкой для всех клиентов:

<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
    <tr>
        <td align="left">   
            <table cellspacing="0" cellpadding="0" align="left">
                <tbody>
                    <tr>
                        <!-- spacer for the top of the image -->
                        <td align="left" colspan="2">
                            <img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
                        </td>
                    </tr>
                    <tr>
                        <!-- the image or text -->
                        <td align="left">
                            <img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
                        </td>

                        <!-- spacer for the right of the image -->
                        <td align="left">
                            <img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                    <tr>

                        <!-- spacer for the bottom of the image -->
                        <td colspan="2" align="left">
                            <img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- here your tekst -->
            <div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
        </td>
    </tr>
</tbody>
</table>
person Rakhal Imming    schedule 26.03.2013

arrow_upward
1
arrow_downward

Иногда принятое решение (добавление align= "left" в заголовки/родительские таблицы) не работает (в моем случае с несколькими вложенными таблицами):

таблица с выравниванием по левому краю без исправления

Добавление mso-table-rspace в таблицу с выравниванием по левому краю сработало:

таблица с выравниванием по левому краю с исправлением

<table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:7pt;">

person Herr_Schwabullek    schedule 03.05.2016

arrow_upward
-3
arrow_downward

Я не уверен, в чем проблема с Outlook 2013, но вы можете попытаться добиться того же макета с помощью структуры div.

HTML:

<div class="outer">
  <div class="first">text in the table cell.<br>and another line of text.<br>and a third line.</div>
  <div class="second">Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</div>
</div>

CSS:

.outer {
  width : 50%;
  height : 50%;
  background-color: green;
}

.first {
  background-color: red;
  float : left;
}

.second {
  background-color: yellow;
}

Ссылка на демонстрацию

person Saket Patel    schedule 24.03.2013
comment
К сожалению, это вообще не работает в Outlook 2013. Разделы div имеют одинаковую ширину с красным div поверх желтого div. Зеленый div вообще не отображается, если вы не поместите в него содержимое. - person jalperin; 25.03.2013
comment
к сожалению, структура div не является решением для любых вопросов, связанных с почтовым клиентом. Даже если это исправит это в Outlook, это сломает его где-нибудь еще. Это печально, я знаю. :) - person S.Kiers; 04.09.2013