email
Skład wiadomości e-mail w formacie HTML i zawiłości programu Outlook
Szukaj…
Obrazy tła
Obrazy tła komórki tabeli o pełnej szerokości
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%" height="20">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#33cc99">
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- Testowane w programie Outlook 2010 przez Windows 7 VMWare na OSX 10.9.2
Obrazy tła komórki w kafelkach o pełnej szerokości
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- Testowane w programie Outlook 2010 przez Windows 7 VMWare na OSX 10.9.2
Określone obrazy tła komórki tabeli szerokości
Oto przykład: dwa rzędy, pierwszy rząd ma 3 kolumny z 3 oddzielnymi obrazami tła, drugi rząd rozciąga się w poprzek jak jeden obraz tła.
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
- Testowane w programie Outlook 2010 przez Windows 7 VMWare na OSX 10.9.2
Tworzenie przekładek
Niektóre klienty poczty e-mail (zwłaszcza Windows Desktop Outlook) zwijają tabele bez zawartości, nawet jeśli istnieją wymiary lub dopełnienie.
Aby zapobiec zwinięciu tych tabel przez tych klientów, możesz dodać niewidoczny która służy jako treść. Następnie wyzeruj font-size i line-height aby nie miało to wpływu na wymiary <table> . Atrybut wysokości (lub szerokości) jest teraz jedyną rzeczą wpływającą na wymiary elementu dystansowego.
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td height="40" style="font-size: 0; line-height: 0;">
</td>
</tr>
</table>
To było powszechną praktyką jest stosowanie 1x1 przezroczysty .gif jako przerywnik, ale metoda ta jest przestarzała.
Odstępy między elementami
Program Outlook może czasem dodać trochę odstępów po lewej i prawej stronie elementu, co może powodować pewne bóle głowy związane z układem. Korzystając ze specyficznych dla dostawcy właściwości CSS mso-table-lspace i mso-table-rspace CSS, możesz pozbyć się tych przestrzeni i kontynuować rozwiązywanie milionów innych problemów spowodowanych przez program Outlook.
table{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
Zmiana rozmiaru obrazu
Używanie znaczników szerokości lub wysokości do zmiany rozmiaru obrazów w znacznikach może powodować problemy w przeglądarkach Internet Explorer. Jeśli Twój czytelnik przegląda wiadomość e-mail w przeglądarce i okazuje się, że zawiera ona płynne obrazy, po zmianie rozmiaru będzie wyglądać dość brzydko. Korzystanie z trybu -ms-interpolacji: bicubic; zapewnia, że twoje zdjęcia wyglądają trochę lepiej.
img{
-ms-interpolation-mode:bicubic;
}
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow
