У меня два вопроса о рендеринге HTML-кода в разных почтовых клиентах.
Во-первых, фон в тд распространяется с наложением текста в Outlook. Я понимаю, что для рендеринга фонового изображения мне нужно создать что-то похожее на это:
<tr>
<td style="padding-bottom: 45px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="<#= GetHeaderImage() #>" bgcolor="#000001" valign="top" height="300" class="m-bg">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 752px; height: 300px;">
<v:fill type="frame" src="<#= GetHeaderImage() #>" color="#000001" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="h-auto" height="240" style="padding: 30px 45px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img-center" style="padding-bottom: 30px; font-size:0pt; line-height:0pt; text-align:center;">
<a href="#" target="_blank">
<img src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-hi.png" width="108" height="68"
border="0" alt="" />
</a>
</td>
</tr>
<tr>
<td class="h1 a-center t-white" style="padding-bottom: 10px; font-family:Arial, sans-serif; font-size:36px; line-height:42px; text-align:center; color:#ffffff;">
<strong>Top Text</strong>
</td>
</tr>
<tr>
<td class="h2 a-center t-white" style="font-family:Arial, sans-serif; font-size:24px; line-height:30px; text-align:center; color:#ffffff;">Middle Text<br />Bottom Text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
(я заменил изображения и текст на некоторые заполнители по соображениям конфиденциальности; также в разделе <# = GetHeaderImage () #> я разрабатываю HTML как текстовый шаблон, а затем генерирую текст во время компиляции .)
В GMail Desktop он выглядит нормально (не мобильно, и это проблема, поэтому, если кто-нибудь знает, я буду рад узнать, почему, хотя я могу исследовать это отдельно позже; игнорируйте подбор размера изображения):
Но в Outlook это выглядит не по центру!
Хуже того, в Outlook Web изображение вообще отсутствует, но оно центрировано!
Это приводит меня к нескольким выводам:
1) Мой HTML выглядит примерно правильно для наложения текста / изображений на фоновое изображение td в GMail Desktop / обычном Outlook. Тем не менее, текст не в центре в Outlook. Зачем? Я замечаю, что если я экспортирую .html из Outlook и проверяю его, ширина и высота vml, кажется, не соответствуют тому, что я установил. Есть ли для этого особая причина?
2) Почему ссылки на вложения не работают для фона td в GMail или для заливки VML в Outlook Web, а URL-адреса работают на всех платформах? Есть ли способ заставить ссылки вложения работать?
Спасибо за любую помощь! Я также отвечу, если мне удастся выявить проблемы.