这些可能是一些愚蠢的问题/错误,但我真的对html电子邮件嗤之以鼻,我就在我的系绳的尽头,所以 我想知道我是否可以把这个过去。
我很难显示我创建的电子邮件。 主要攻击者是Outlook 2010,其中存在以下错误(我已将其标记为文本) -
顶部横幅“images / img_row_1.jpg”应与其下方的内容和文字的宽度相同,但它更窄。
包含“那一个”的表应该与正在进行的图像和文本并排放置,但不断被强制插入2行。 我减小了宽度,但现在它没有与它上面和下面的元素对齐。
包含“this one”的表也被强制转换为新行。
此外,以下评论中包含的区域显示为2行,而不是显示在任何其他电子邮件客户端/浏览器中的1,例如,
<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody>
<tr>
<td>
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<td align="center" height="60" style="font-size:10px; line-height:1px;"><p style="background:none; border:solid 1px #d2d2d2; border-width:1px 0 0 0; height:1px; width:93%; margin:0px 0px 0px 0px; padding-top:10px;"> </p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
修改
答案 0 :(得分:1)
Outlook在彼此相邻时为表添加一个小缓冲区 - 这就是推动下面的最后一个,因为没有足够的空间。快速解决方法是使表格的宽度减小几个像素。
然而,正确的方法是将它们放在<td>
内。
基本示例:
<!-- You are doing this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#777777" width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
table 1
</td>
</tr>
</table>
<table bgcolor="#999999" width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
table 2
</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
<!-- Instead do this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- nest a full width table with 2 cells -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300">
<table bgcolor="#777777" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
table 1
</td>
</tr>
</table>
</td>
<td width="300">
<table bgcolor="#999999" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
table 2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>