Небольшой зазор в 1 пиксель под таблицей в рендеринге электронной почты Outlook

Отрисовка HTML в Office — известная головная боль, и у меня возникла проблема с Outlook 2016. Под моей таблицей отображается небольшая горизонтальная линия шириной 1 пиксель. Таблицы являются обычной практикой форматирования из-за многих недостатков Outlook/Office/Word HTML/Richtext/Mixup.

Линия в 1 пиксель на самом деле представляет собой небольшой пробел или дыру в белом цвете фона таблицы, показывающую цвет фона тела. Мне удалось понять это, изменив цвет фона на красный вместо серого.

введите здесь описание изображения

Код можно протестировать в Notepad++, выбрав Выполнить›Отправить через Outlook на компьютере с Windows и установленным клиентом Outlook...

<!DOCTYPE html>
<html>
   <head>
  <style>
     html,
     body
     {
     font-family: 'sans-serif';
     } 
  </style>
   </head>
   <body style="background-color: red">
  <table style="background-color: white;" >
     <tr>
        <td>
           <table>
              <tr>
                 <td>
                    <a href="" style="font-size: 30px;">Test before</a>
                 </td>
              </tr>
           </table>
           <table>
              <tr>
                 <td>
                    <p>
                       Test 1<br>
                       Test 2<br>
                       Test 3
                    </p>
                 </td>
              </tr>
           </table>
           <br/><br/>
           Test after
        </td>
     </tr>
  </table>
   </body>
</html>

Структура представляет собой уменьшенную версию электронного письма, в которой элементы используются для представления информации.


html css outlook html-email outlook-2016
person Jesper Wilfing    schedule 02.12.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

(Примечание! TL;DR; - Лучшее решение внизу)

Есть несколько различных способов изменить структуру, чтобы убрать зазор. Однако это не вариант в моем случае. Решение, которое исправило это для меня, состояло в том, чтобы уменьшить все до минимума, шаг за шагом в соответствии с приведенным выше, и, наконец, попытаться изменить все значения.

Окончательное решение в моем случае состояло в том, чтобы изменить размер шрифта в таблице до НЕ 30 пикселей.

<a href="" style="font-size: 29px;">Test before</a>

В моей конкретной встрече с магией рандомизатора рендеринга Ms Outlook это было ключом. Я уверен, что решение может отличаться для других, но, возможно, стоит попробовать изменить несколько размеров шрифта.

Поскольку это заняло у меня достаточно много времени, я подумал, что лучше опубликовать решение, возможно, оно поможет кому-то столь же разочарованному, как я!

[Изменить] Вот еще один пример этой проблемы — игра с высотой строки

введите здесь описание изображения

<!DOCTYPE html>
<html>
    <head>
        <title>Yea</title>
    </head>     
    <body style="width: 100%; background-color: white;">
        <br/><br/>
        <table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
            <tr>
                <td style="height: 114px; font-size: 100px; background-color: #999999"><span>&nbsp;My name is Jasper</span></td>
            </tr>
        </table>
        <br/><br/>
    </body>
</html>

Ну, в этом случае проблема при исследовании кода заключалась в line-height: 0; элемента таблицы. Удалите его или установите на 1 пиксель, чтобы избавиться от элемента, который выглядит как толстая белая линия, но на самом деле является проблеском фона. Это определенно ошибка рендеринга, и она, по крайней мере, проявляется в Outlook 2019/2016 (win 10). Воспроизводится с помощью Litmus.

[Правка № 2 — Добавьте невидимый тег]

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

<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
 <tr>
    <td style="font-size: 0px;line-height: 0px;">&nbsp;</td>
 </tr>
</table>

[Редактировать №3 — Наконец — лучшее решение!]

Поскольку промежутки между версиями Outlook немного случайны, появляются как по горизонтали, так и по вертикали (согласно моим последним нескольким часам устранения неполадок) и зависят, среди прочего, от настроек DPI, абсолютно лучшим решением кажется следующее...

Добавьте содержимое, инкапсулирующее <table style="background-color: lime"><tr><td>CONTENT</td></tr></table>, с верхним/передним фоновым цветом. Это по какой-то причине закроет все пробелы! Удачи!

person Jesper Wilfing    schedule 02.12.2020

arrow_upward
0
arrow_downward

Другое возможное решение, которое помогло в моем случае, заключалось в том, чтобы не использовать абзацы <p> — я просто заменил их разрывами строк <br/><br/>.

person AntonyX    schedule 04.05.2021