Question

我查了几篇帖子，然后试了一下。没工作。这可能成为一个决定，并告诉客户这是什么，但我不想这样做。

因此在使用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>

我已经取出了客户端副本和徽标。

正如我所说，这可能归结为一个决定，即不让它在2007/10的前景中排队，同时让它在其他人中运作。

因此，如果有人有任何建议，那将是最有帮助的。

Answer 1

对于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电子邮件中的很多错误，但是一旦你掌握了编写最糟糕的邮件客户端的代码，它将成为第二天性！;）

电子邮件图片没有排列在2007/10与其他一切相比

1 个答案: