Outlook 2010/Outlook 2007, похоже, не оценивает высоту строки в моей электронной почте HTML. (Он отлично работает в Outlook 00 и Outlook 03)
Я делаю несколько обширных поисковых запросов, а HTML-таблицы поддержки CSS, которые я нашел, говорят, что Outlook 2010/2007 СЛЕДУЕТ понимать высоту строки.
Я попытался поместить строчную высоту на родительский элемент блока и элемент абзаца-потомка, а также на идентификатор в теге стиля в голове и каждую комбинацию выше.
Я также обеспечил явное объявление высоты строки в качестве значения пикселя, которое значительно больше размера текста (но я тоже пробовал% и em). Пробовал делать! Важно в декларации - и даже пробовал valign вместе с каждым другим советом, который я мог найти в Интернете.... Я использовал линию-высоту, например. определить кнопку padding-top и padding-bottom, так как поддержка HTML E-mail для заполнения/поля настолько ошибочна.
Я был бы очень признателен за любую помощь в этом. На самом деле сейчас в голове!
Фактический адрес электронной почты огромен, так как это сложный информационный бюллетень, но вот фрагмент стиля в голове и раздел таблицы, в котором высота строки не работает. Надеюсь, этого достаточно!:
<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 -->
Я использую комбинацию встроенного 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;. Прокладка просто препятствует тому, чтобы теги абзаца создавали ненужное пространство.
Outlook поддерживает высоту строки, указанную в процентах. Например, строка-высота: 1.1 не поддерживается, но строка-высота: 110%.
Поздний отклик, но поскольку я недавно работал с аналогичной проблемой линейной высоты в 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, исправление часто столь же глупо, как и проблема. Используйте это, если хотите, но тщательно проверяйте его перед отправкой фактическим получателям.
Outlook использует слово html-процессор для рендеринга и редактирования html. Привыкайте к табличным макетам и забудьте о css, а если - используйте только встроенный css. у вас есть только несколько возможностей: фон, шрифт-семья, font.size, цвет.
можно найти полный список поддерживаемых css здесь, учебник .
Но вы также должны думать о своих получателях - если они находятся на почте Google или почте yohoo, ваш css можно полностью удалить.
хорошим ресурсом для разработки бюллетеней по электронной почте является campaignmonitor.com/resources, они также проводят повторную проверку всех почтовых служб и их функций HTML/CSS.
Для строки-высоты для работы в Outlook после добавления "mso-line-height-rule: точно"; перед строкой-высотой обязательно используйте процент вместо десятичного значения (т.е. 150% вместо 1,5)
Настройка line-height с использованием встроенного css в ячейке таблицы должна быть прекрасной, но вам действительно не нужны те теги <p>, которые просто вводят проблемы форматирования и ссылки на теги <p> в теги <style> в <head> будут игнорироваться рядом клиентов.
Лучший подход к этой проблеме - использовать относительное позиционирование и свойство top, это работает как талисман, см. пример кода ниже
<div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>