問題描述
Outlook 中的 HTML 電子郵件呈現 ‑ VML (HTML Email Render in Outlook ‑ VML)
I have created a HTML email and when viewing in Outlook 2007 I couldn't see some images as they were backgrounds. I have done some hack using VML however it won't let me leave the height value blank as it defaults to 100px, or I can't put auto or a percentage. The background image needs to be able to resize depending on the text size so it shows all the text.
This is the code I have working except for the height values.
<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>
Any help would be appreciated.
‑‑‑‑‑
參考解法
方法 1:
Use:
<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"/>
Rather than:
<v:rect
And then in your "v:shape" change height to "auto", this worked for me in OL2007. bearing in mind my example is based on a area that has content that exceeds 100px so I'm not sure if it still defaults at 100px as its minimum, if you need it to be less then set a max‑height in the "v:shape" below 100px (but obviously this would prevent scaling to the content)
(by user1344311、Alex Barber)