Смещение электронной почты в HTML в Outlook 2013?

Question

Смещение электронной почты в HTML в Outlook 2013?

0

У меня очень простой HTML-шаблон для электронной почты - он просто используется для тестирования - и он имеет 5 столбцов с одним словом, проблема в Outlook 2013: первый столбец всегда неверно выровнен по вертикали. Вот HTML.

  <!DOCTYPE html>
<html><body>    
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
                <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;">
                                        Row
                                    </td>
                                </tr></table></td>
                    </tr></table></td>
        </tr></tbody></table></body></html>

Результат в Outlook 2013:

Это вывод кода из Outlook

<!DOCTYPE html><br />
<html><body>    <br />
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
                <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br />
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                    <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br />
                                        Row<br />
                                    </td><br />
                                </tr></table></td><br />
                    </tr></table></td><br />
        </tr></tbody></table></body></html><br />

Проблема связана со всеми дополнительными тегами BR, которые добавляет Outlook, но что я могу сделать с этим?

Благодарю!

David Healey 21 окт. 2013, в 17:45

Источник

Теги:

html

css

email

outlook

vertical-alignment

1 ответ

Ещё вопросы

Stuart Kershaw · Accepted Answer · 2013-10-21T13-04-00.000Z

1

Лучший ответ

Насколько мне известно, внешние стили не поддерживаются в электронных письмах, а стили должны применяться внутри каждого тега. Вы пытались добавить valign="top" на каждый из вложенных tds?

<td valign="top">
    Row
</td>

Вы также можете попробовать закрыть любые пробелы, которые вложены в ваши теги, например:

<td valign="top">Row</td>

Stuart Kershaw 21 окт. 2013, в 13:04

0

Как я уже сказал, стили встроены до отправки электронного письма, для этого у меня есть функция PHP, я не использую внешние стили. Я попробовал valign, и, к сожалению, это не сработало.
David Healey 21 окт. 2013, в 15:04
0

Вы проверяли свою электронную почту без функции /, создавая ее с предполагаемым выводом? Я не думаю, что вы должны включить эту функцию здесь.
Stuart Kershaw 21 окт. 2013, в 15:07
0

Да, я попробовал это без, я также проверил источник электронной почты в outlook, и он содержит все стили и т. Д., Как код, который я написал, однако добавляет много тегов BR, но они одинаковы для каждой ячейки, так все должно быть смещено, если это было проблемой.
David Healey 21 окт. 2013, в 15:08
0

Можете ли вы включить выведенный код пост-php? С этим было бы легче работать, чем с отдельным кодом, который в настоящее время представлен в вашем вопросе (и я не говорю о дополнительных вещах, которые Outlook может добавлять). Просто код электронной почты в формате HTML, который вы создали бы без php.
Stuart Kershaw 21 окт. 2013, в 15:10
0

Позвольте мне отказаться от моего предыдущего заявления. Я только что сделал тест, если я добавлю тег BR перед первым TD, то все будет нормально. Я обновлю свой вопрос @stuart Kershaw - я вставил код со встроенными стилями сейчас, как отправлено в outlook
David Healey 21 окт. 2013, в 15:10
0

Вы уверены, что Outlook добавляет эти разрывы строк? Вы проверяли это в других почтовых клиентах?
Stuart Kershaw 21 окт. 2013, в 15:15
0

Кроме того, ваше вертикальное выравнивание добавляется как свойство style = "vertical-align: top;" Я предложил добавить атрибут valign = "top"
Stuart Kershaw 21 окт. 2013, в 15:16
0

Я мог бы поцеловать тебя! Я не думал проверять другого клиента и предполагал, что это был внешний вид, вызывающий проблему. Я только что провел несколько тестов и обнаружил, что это класс электронной почты codeigniter, добавляющий дополнительные теги.
David Healey 21 окт. 2013, в 15:23
0

Так что проблема, кажется, в том, что я тупой. По какой-то причине я проверил тело письма через - nl2br - перед его отправкой. Я дурак!
David Healey 21 окт. 2013, в 15:35
0

Рад, что вы нашли проблему! Есть так много странностей, с которыми можно столкнуться с электронными письмами, это всегда проба и ошибка с этими вещами.
Stuart Kershaw 21 окт. 2013, в 15:37

Показать ещё 8 комментариев