Высота строки не работает в Outlook 2010 для электронной почты в формате HTML

Question

Outlook 2010 / Outlook 2007, похоже, не учитывает высоту строки в моем HTML-письме. (Отлично работает в Outlook 00 и Outlook 03)

Я много занимался поиском в Google - и диаграммы поддержки HTML CSS, которые я обнаружил, говорят, что Outlook 2010/2007 ДОЛЖЕН понимать высоту строки.

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

Я также гарантировал, что я явно объявляю высоту строки как значение пикселя, которое значительно больше размера текста (но я пробовал% и em тоже). Попытка поставить! Важный в декларации - и даже пробовал valign вместе со всеми другими советами, которые я мог найти в Интернете .... Я использовал высоту строки, например, для. определите кнопки padding-top и padding-bottom, так как поддержка электронной почты HTML для padding / margin очень глючная.

Я был бы очень признателен за любую помощь в этом. На самом деле сейчас в головокружительной точке!

Реальная электронная почта огромна, так как это сложная новостная рассылка, но здесь есть фрагмент стиля в голове и раздел таблицы, в котором высота строки не работает - надеюсь, этого достаточно!:

<style type="text/css" media="screen">
    html {
        -webkit-text-size-adjust:none;
        -webkit-background-size:100%;
    }
    body{
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        background-color:#e5e5e5;
    }
    p{
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        display:block;
    }
    a:link, a:visited, a:active{
        color:#55c2d9;
        text-decoration: underline;
    }
    a:hover{ 
        text-decoration: underline; 
    }
    .body a:link, a:visited, a:active{
        color:#55c2d9;
    }
    img{
        border: 0;
        display: block;
    }
    table.main {
        background-color: #ffffff;
        width:650px;
    }
    td {

    }
    #header-top p{
        line-height:33px;
    }

</style>

                    <!-- Content -->
                    <table border="0" cellspacing="0" cellpadding="0" class="body">
                        <!-- Row 1 -->
                        <tr valign="top">
                            <td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626">

                                <table border="0" cellspacing="0" cellpadding="0" id="header-top">

                                    <!-- Row 1.1 -->
                                    <tr valign="top">
                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>

                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor="">
                                            <p><a href="#">click here to view this email in a browser</a></p>
                                        </td>
                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor="">
                                            <p>find us on:</p>
                                        </td>

                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>
                                    </tr>

                                </table>

                            </td>
                        </tr>

                    </table> <!-- Content -->

Answer 1

Я использую комбинацию встроенного CSS для управления высотой строки:

<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>

Ключевым элементом является собственный CSS-атрибут Microsoft, mso-line-height-rule: exactly;. Заполнение просто предотвращает создание ненужных пробелов в тегах абзаца.

Answer 2

Outlook поддерживает высоту строки, указанную в процентах. Например, line-height: 1.1 не поддерживается, но line-height: 110% равно.

Answer 3

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

По любой причине, если вы бросаете неупорядоченный список в HTML непосредственно передтег CLOSING тега, для которого вы указали высоту строки, Outlook 2010 учитывает высоту строки.

Вы можете сделать неупорядоченный список пустым и невидимым:

<ul style="list-style-type: none; visibility:hidden;"></ul>

Пример:

<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>

Отказ от ответственности: я не проверял это полностью.Он работает в моем шаблоне через один ESP в Outlook 2010, текущую версию Gmail (27 июля 2012 г.) и почтовое приложение для iPhone.Я не знаю, если трюк универсально исправляет проблему высоты линии в других тегах.Я также признаю, что это грязное исправление, но это грязная проблема;и, как это часто бывает с вопиющим пренебрежением Outlook к спецификациям HTML, исправление часто столь же глупо, как и проблема.Используйте это, если хотите, но тщательно проверьте его перед отправкой реальным получателям.

Answer 4

Чтобы высота строки работала в Outlook, после добавления «mso-line-height-rule: точно;» перед высотой строки обязательно используйте процент вместо десятичного значения (то есть 150% вместо 1,5)

Answer 5

Outlook использует текстовый процессор html для рендеринга и редактирования html.Привыкайте к разметке таблиц и забудьте о css, а если - используйте только встроенный css.у вас есть всего несколько возможностей: background, font-family, font.size, color.

полный список поддерживаемых css можно найти здесь , учебное пособие здесь .

Но вы также должны подумать о своих получателях - если они находятся на почте google или yohoo, ваша css может быть полностью удалена

хорошим ресурсом для разработки новостных рассылок по электронной почте является campaignmonitor.com/ресурсам, они также регулярно проверяют все почтовые сервисы и их функции HTML / CSS

Answer 6

Установка line-height с использованием встроенного css для ячейки таблицы должна быть в порядке, но вам действительно не нужны эти теги <p>, которые просто создают проблемы форматирования и ссылки на эти теги <p> втеги <style> в <head> будут игнорироваться рядом клиентов.