すべてのメール クライアントで適切にレンダリングされるグラデーションを使用する HTML メールを作成しようとしています。最初に、TD プロパティと CSS を使用して 1 ピクセル x 13 ピクセルの画像背景を縦に繰り返してみましたが、Outlook は「いいえ」と言いました。これで、幅が 1 ピクセルで背景色がグラデーションを構成する 13 個の TD を作成しましたが、outlook はそれらを 1 ピクセルの境界線で幅約 3 ピクセルとしてレンダリングしています。
これがコードです。どうすれば Outlook を喜ばせることができますか、または Outlook を喜ばせる方法はありますか?
<table width="730px" cellpadding="0px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial; margin-left:auto; margin-right:auto; margin-bottom:0;" bgcolor="#fbebd8">
<tr valign="top">
<td bgcolor="#fff" width="1px"> </td>
<td bgcolor="#fff" width="1px"> </td>
<td bgcolor="#fdfcfa" width="1px"> </td>
<td bgcolor="#fcf8f5" width="1px"> </td>
<td bgcolor="#f7f2ee" width="1px"> </td>
<td bgcolor="#f2e7e1" width="1px"> </td>
<td bgcolor="#efded4" width="1px"> </td>
<td bgcolor="#e9d3c5" width="1px"> </td>
<td bgcolor="#dfc8b6" width="1px"> </td>
<td bgcolor="#d9bba3" width="1px"> </td>
<td bgcolor="#e4cab3" width="1px"> </td>
<td bgcolor="#ddc7b0" width="1px"> </td>
<td bgcolor="#ebd9c3" width="1px"> </td>
<td bgcolor="#f9e7d1" width="1px"> </td>
<td>
<!-- embedded half-left table -->
<table width="348px" cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;">
<tr>
<td colspan="3" valign="top">
<p><strong>Lorem Ipsum</strong></p>
</td>
</tr>
<tr>
<td>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
<td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
<td valign="top"> <img src="CaseNotes/archive/20120815-honors-college.jpg" alt="" height="81" width="100" /> </td>
</tr>
</table>
<!-- end half-left table -->
</td>
<td bgcolor="#999999" > <img width="2px" src="CaseNotes/greybox.jpg" /> </td>
<td>
<table width="348px" cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;" >
<!-- half-right table -->
<tr valign="top">
<td valign="top" colspan="3">
<p><strong>Lorem Ipsum</strong></p>
</td>
</tr>
<tr>
<td valign="top">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
<td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
<td> <img src="CaseNotes/superman.jpg" alt="" height="150px" width="150px" /> </td>
</tr>
</table>
<!-- end half-right table -->
</td>
<td bgcolor="#f9e8d4" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#e7cfb8" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#ead2bb" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#e5c8b0" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#b17853" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#b88460" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#c29371" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#cca385" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#d5b39a" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#ddc2ad" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#e5cfbe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#ebdbce" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#f1e5dc" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#f6efe9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#faf5f2" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#fdfaf9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#fefefd" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
<td bgcolor="#fffefe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
</tr>
</table>
<!-- end super table -->