我正在尝试创建一个HTML电子邮件，该电子邮件使用可在所有电子邮件客户端中正确呈现的渐变。我最初尝试使用TD属性和CSS垂直重复1px x 13px图像背景，但Outlook说“不”。现在我已经制作了13个宽度为1px的TD和构成渐变的背景颜色，但是前景正在以3px宽度和1px边界将它们渲染出来。
这是代码。我怎么能取悦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 -->
答案 0 :(得分：0)
我不知道这是不是问题，但是，在定义css的宽度时，作为属性，你不要用px定义它。
例如：<td width="1">
相比之下，css会成功：<td style="width:1px;">;
答案 1 :(得分：0)
尝试两次声明你的宽度。一次作为html属性，一次作为内联css样式。
例如试试这个：
某些电子邮件客户端使用html属性，我认为Outlook 2010使用内联样式。
答案 2 :(得分：0)
电子邮件的简单背景：http://emailbg.net/
将托管的图片网址放在左上角，确保代码中的图片尺寸正确（您可能需要在左上角的文本框中再次输入），并确保单击单个表格单元格： ）
我经常使用它。在Litmus进行测试并完全符合要求。