在Outlook中,css填充不起作用

Question

我在电子邮件模板中有以下html.

我在MS Outlook和gmail中获得了不同的视图.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

如何解决这个问题？

Answer 1

不幸的是,当谈到EDM时,Outlook是你最大的敌人.当单元格的内容决定单元格尺寸时,某些版本不支持填充.

在邮件客户端中为您提供最一致结果的方法是使用空表格单元格作为填充(我知道,恐怖),但请记住用所需尺寸的空白图像填充这些表格,因为您猜对了,某些版本的Outlook不尊重空单元格的高度/宽度声明.

EDM不是很有趣吗？(不,他们不是.)

Answer 2

避免通讯中的填充和边距，一些电子邮件客户端将忽略此属性。

您可以使用空的tr和td建议的（但这会产生大量的 html），或者您可以使用与电子邮件背景颜色相同的边框。所以，而不是padding-top: 40px你可以使用border-top: 40px solid #ffffff（假设电子邮件的背景颜色是#ffffff）

我已经在 gmail（和商业 gmail）、雅虎邮件、Outlook Web、Outlook 桌面、雷鸟、苹果邮件等中测试了这个解决方案。据我所知，边界属性在任何地方都可以安全使用。

例子：

<!-- With paddings: WON'T WORK IN ALL EMAIL CLIENTS! -->
<table>

    <tr>

        <td style="padding: 10px 10px 10px 10px">
            <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result with borders and same border color of the background -->
<table>

    <tr>

        <td style="border: solid 10px #ffffff">
           <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result using empty td/tr. (A lot more html than borders, get messy on large emails) -->
<table>

    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>


    <tr>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

        <td><!--Content goes here--></td>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

    </tr>


    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>

</table>
<!-- With tr/td every property is needed. height must be setted both as attribute and style, same with width, line-height must be setted JIC default value is greater than actual height and without the &nbsp; some email clients won't render the column because is empty. You can remove the colspan and still will work, but is annoying when inspecting the element in browser not to see a perfect square table -->

此外，这里是制作没有媒体查询的响应式新闻通讯的优秀指南。电子邮件确实适用于任何地方：

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

并且永远记住使样式内联：

https://inliner.cm/

要测试电子邮件，这里有一个很好的资源：

https://putsmail.com/

最后，如果您对电子邮件客户端中的 css 支持有疑问，您可以访问这里：

https://templates.mailchimp.com/resources/email-client-css-support/

或在这里：

https://www.campaignmonitor.com/css/

Answer 3

我改为跟随,它对我有用

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

基于Bsalex请求更新实际已更改的内容. 我替换了span标签

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

表和td标签如下

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

Answer 4

要在电子邮件模板中创建HTML,即电子邮件/简报,填充/边距不支持电子邮件客户端.您可以拍摄1x1尺寸的空白GIF图像并使用它.

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

Answer 5

只需使用
<Table cellpadding="10" ..> ... </Table>
不要在MS-Outlook中使用px.Works.

Answer 6

填充在 Outlook 中不起作用。您可以简单地在元素/文本之前使用多个空格（& nbsp;）来填充左侧，而不是添加空白图像，对于填充顶部或底部，您可以添加一个仅包含空格（& nbsp;）的 div 。这会奏效！！！

Answer 7

我遇到了同样的问题，最终实际上使用了border而不是padding.