HTML-рендеринг электронной почты в Outlook - VML
Я создал сообщение электронной почты в формате HTML, и при просмотре в Outlook 2007 я не мог видеть некоторые изображения, поскольку они были фоновыми. Я сделал некоторый хак с использованием VML, однако он не позволит мне оставить значение высоты пустым, так как по умолчанию он равен 100px, или я не могу поставить auto или процент. Фоновое изображение должно иметь возможность изменять размер в зависимости от размера текста, чтобы оно отображало весь текст.
Это код, который я работаю, за исключением значений высоты.
<td colspan="6" align="center" valign="top" style="background-image: url('http://example.com/content_centre.png');" background="http://example.com/content_centre.png">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="width:620px;height:200px;" strokecolor="none">
<v:fill xmlns:v="urn:schemas-microsoft-com:vml" type="tile" color="#DDDDDD" src="http://example.com/content_centre.png" /></v:fill>
</v:rect>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style="position:absolute;width:620px;height:200px;">
<![endif]-->
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;"><tr>
<td width="30"></td>
<td align="left" style="font-family:Arial, Helvetica, sans-serif; background:#ffffff; ">
<p>This is where the text will appear. Doesn’t matter how much text it just stops displaying it.</p></td>
<td width="30"></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
Любая помощь будет оценена.
1 ответ
Использование:
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:200px; width:620px; top:0; left:0; border:0; z-index:1;' src="http://example.com/content_centre.png"/>
Скорее, чем:
<v:rect
И затем в вашем "v:shape" измените высоту на "auto", это сработало для меня в OL2007. имея в виду, что мой пример основан на области, содержание которой превышает 100px, поэтому я не уверен, что она по умолчанию имеет значение 100px как минимум, если вам нужно, чтобы оно было меньше, установите max-height в "v: shape "ниже 100px (но, очевидно, это предотвратит масштабирование до содержимого)