我查看了一些帖子,并尝试了它们。没用。这可能会成为一个决定,并告诉客户这就是事实,但我不想那样做。
因此,在使用 Litmus 进行测试后,我的主要问题是边框(左和右)与顶部和底部图像在 2007/10 年外书上未正确对齐与其他所有内容相比。
<body>
<style type="text/css">
body{
color:#415b7c;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
padding:0;
margin:0;
}
table {border-collapse: collapse;}
</style>
<table width="100%" bgcolor="#ffffff">
<tr>
<td><!-- header -->
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/top.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
<tr valign="top">
<td>
<table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; ">
<tr>
<td>
client log
</td>
<td>
<table cellpadding="10" style="color:#576276;">
<tr>
<td>
<p style="font-weight:bold">
Text
</p>
<p>
text
</p>
</td>
</tr>
</table>
</td>
<td>
client logo
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px">
<table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;">
<tr>
<td style="color:#ffffff; font-size:24px; ">
text
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/bottom.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>
我已取出客户副本和 Logo 。
正如我所说,这可能归结为不让它在 2007/10 展望中排队,而让它在其他人中发挥作用的决定。
因此,如果有人有任何建议,那将是非常有帮助的。
最佳答案
对于 outlook(和 gmail),您需要在图像上指定 border="0"。
<img src="/" width="" height="" alt="" border="0" style="display:block">
这应该出现在您在电子邮件中使用的每张图片上,甚至是分隔符。 (事实上 ,尤其是在间隔物上,因为它们会产生不需要的空白空间,没有任何内容)
此外,Outlook 在呈现单元格填充和间距时遇到问题(2007 和 2010 都使用 Microsoft WORD 作为它们的呈现引擎,我会让你想象呈现 html 电子邮件有多棒)。
所以你真的应该使用嵌套表格而不是单元格填充,使用间隔图像来创建你的部分的内部空间。
哦,我看到你所有的样式都不是内联的。这将导致您的 html-email 稳定性出现问题。 (gmail 将去除所有非内联样式,以及链接上的 #000000 颜色(改为使用 #000001))。
还有哦。边框样式和颜色。这些不会在任何地方正确显示。解决方案还是嵌套表。使用 bgcolor 和 1/2px 宽度的间隔符来产生边框的错觉。
希望这对您有所帮助。 (我知道这听起来像是您的 html 电子邮件中的很多错误,但是一旦您掌握了为最糟糕的邮件客户端编写代码的窍门,它就会成为第二天性!;))
关于html - 2007/10 年与其他所有内容相比,电子邮件图像未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18194864/