0

我检查了一些帖子，并尝试了它们。没用。这可能会成为一个决定并告诉客户这就是事实，但我不想这样做。

因此，在使用 Litmus 进行测试后，我的主要问题是边框（左右）与顶部和底部图像在 outbook 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 展望中排队的决定，而让它在其他方面发挥作用。

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

4

1 回答 1

0

对于 Outlook（和 gmail），您需要在图像上指定边框 =“0”。

<img src="/" width="" height="" alt="" border="0" style="display:block">

这应该出现在您在电子邮件中使用的每张图片上，甚至是分隔符上。（事实上​​，尤其是在垫片上，因为它们会产生不需要的空白空间而没有任何内容）

此外，Outlook 在渲染单元格填充和间距时遇到问题（2007 和 2010 都使用 microsoft WORD 作为渲染引擎，我会让您想象渲染 html 电子邮件是多么棒）。

所以你真的应该使用嵌套表格而不是单元格填充，使用间隔图像来创建部分的内部空间。

哦，我看到你所有的样式都不是内联的。这将导致您的 html 电子邮件稳定性出现问题。（gmail 将去除所有非内联样式，以及链接上的 #000000 颜色（使用 #000001 代替））。

哦也。边框样式和颜色。这些不会在任何地方正确显示。解决方案再次是嵌套表。使用 bgcolor 和 1 / 2px 宽度的垫片来产生边框的错觉。

希望这一切都有帮助。（我知道这听起来像是您的 html 电子邮件中有很多错误，但是一旦您掌握了为最糟糕的邮件客户端编写代码的窍门，它就会成为第二天性！;)）

于 2013-08-12T19:46:11.227 回答