Outlook 2016 - первая строка с высотой строки по умолчанию, правило mso-line-height-rule не работает - PullRequest
Новая
       103

Outlook 2016 - первая строка с высотой строки по умолчанию, правило mso-line-height-rule не работает

0 голосов
/ 03 июня 2019

Я пытаюсь разработать электронную почту в формате HTML для Outlook 2016, и у меня проблема с высотой строки. Есть много тем по этой проблеме, но мне ничего не помогло. У меня есть несколько «строк» ​​(ячеек td) с 1px в моей таблице, отображаемой без проблем, проблема в первой строке сообщения.

Я попытался добавить встроенное правило mso-line-height-rule: точно в сочетании с line-height: 1px или 0px или 0 или 1. В сочетании с font-size: 0px или 1px или 0 или 1. Ничего не получалось. Поэтому я поместил какой-то другой элемент перед проблемным, и проблема просто переместилась в «новый» элемент, исчез из исходного. Версия Outlook 2016 1808 (сборка 10730.20344), у меня такое ощущение, что раньше некоторое время она работала нормально, без хитростей. 

<style>
    td {
        padding: 0px;
        margin: 0px;
        border: 0px;
    }

    table {
        border-collapse: collapse; 
        border-spacing: 0px;
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    td#line {
        background-color: #f0f0f0;
    }
</style>

<body style="margin: 0px;">
    <table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
        <tr height="1" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px;">
            <td height="1" id="line" colspan="5" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px; "></td>
        </tr>
        <tr>
            ...

ExpectedVsActual

Спасибо!

1 Ответ

0 голосов
/ 04 июня 2019

Наконец-то я нашел какое-то обходное решение ... ниже вы можете найти простой пример.

Вариант 1 (скрытый <div> с некоторым текстом, стиль без mso-hide: all): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

Это работает относительно хорошо, но если вы щелкнете где-нибудь / выберете что-то в сообщении, ваш первый видимый элемент (например, <td>) исчезнет.

Вариант 2 (скрытый <div> с некоторым текстом, стиль w / mso-hide: all, условно отображаемый дополнительный ряд с нулевой высотой и с прозрачным фоном): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; mso-hide:all; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <!--[if gte mso 9]>
                <tr height="0">
                    <td colspan="3" style="background-color: transparent;"></td>
                </tr>
                <![endif]-->
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

Тогда это относительно неразрушимо.

OriginalVsOptions

Плохо только то, что Outlook показывает предупреждение о возможности неправильного рендеринга. Скорее всего, это связано с использованием тега <div>.

EDIT: предупреждение вызывается height: 0 и width: 0 в стиле <div>. Я думаю, что можно удалить эти свойства.

Наслаждайтесь!

...