HTML电子邮件模板发际线
我有一个带有不同块背景颜色的电子邮件模板,因此,颜色在流血并在块之间创建线条 我尝试了我发现的所有解决方案,什么也没奏效,经过数小时的挖掘,我认为问题是嵌套表比他们的父表短一些,
您可以看到问题,我的意思是稍微短的(橙色正在显示)白色在其中,如果是相同的高度,则不会显示橙色):
,这是一个块之一的代码:
<div>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="margin: 0; padding: 0; background:{$cordial-variable}; border-collapse: collapse;"
bgcolor="{$cordial-variable}"
width="100%"
>
<tr>
<td align="center" valign="top">
<table
width="700"
bgcolor="#fcfcfc"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
width: 100%;
height: auto;
padding: 0;
"
>
<tr>
<td align="center" valign="top">
<div>
<table
width="600"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
padding: 0;
width: 80%;
height: auto;
"
>
<tr>
<td style="35px" height="35"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
我尝试的内容:为所有表和TDS设置背景颜色,为所有TR设置VELIGN,将高度更改为偶数值,而不是奇数,而不是奇数用0行高和字体大小设置图像,将高度设置为100%而不是自动。
还有其他建议吗?
I have an email template with different block background colors, and because of this the colors are bleeding and creating lines between the blocks
I tried all the solutions I found and nothing worked, and after hours of digging I think the problem is that the nested tables are slightly shorter than their parent tables
here you can see the problem and what I mean by slightly shorter (the orange is showing and the white is within it, if it was the same height no orange will be showing):
and this is the code for one of the blocks:
<div>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="margin: 0; padding: 0; background:{$cordial-variable}; border-collapse: collapse;"
bgcolor="{$cordial-variable}"
width="100%"
>
<tr>
<td align="center" valign="top">
<table
width="700"
bgcolor="#fcfcfc"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
width: 100%;
height: auto;
padding: 0;
"
>
<tr>
<td align="center" valign="top">
<div>
<table
width="600"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
padding: 0;
width: 80%;
height: auto;
"
>
<tr>
<td style="35px" height="35"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
the things I tried: setting background color for all tables and tds, setting valign for all trs, changing the heights to even values instead of odd ones, setting the images with 0 line-height and font-size, setting the height to 100% instead of auto.
Any further suggestions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
要获得一个特定高度,请兼容交叉电子邮件,您只需要以下操作:
注意
&amp; nbsp;
您没有的 - 部分电子邮件客户端将添加它,然后使用默认值字体大小或线条高。您拥有的第一个
&lt; table
是可以的:细胞板,细胞间隙和边框为零,这应该足够。&lt; div&gt; s
不需要。To get a block a specific height, cross email compatible, you need only this:
Note the
which you don't have--some email clients will add that in and then use a default font-size or line-height on it.
The first
<table>
you have is fine: cellpadding, cellspacing and border are zeroed and that should be enough.<div>s
are not needed.