Question

我是Litmus-测试一个非常简单的电子邮件。除了Outlook 2007和2017之外，所有电子邮件客户端看起来都很不错。显然，在这两个特定的浏览器中，它与按钮重叠并完全删除和存在的空间：请参阅附图并查看我的小提琴/片段以获取完整代码，感谢您的帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Request a quote today.</title>
    <style>
        <!--[if gte mso 9]>
 li {
    text-indent: -5em; /* Normalise space between bullets and text */
} <![endif]-->
                /* Some resets and issue fixes */
        #outlook a { padding:0 ; }
                body{ background-color: #687079; width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }    
        .ReadMsgBody { width: 100%; }
        .ExternalClass {width:100%;}
        .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
        table td {border-collapse: collapse;}
        .ExternalClass * {line-height: 115%;} 
        .left  {text-align:left !important; width:100% !important; height:auto !important;} 
        .appleLinksGray
        {color:#666666 !important; text-decoration:none !important;}
        .appleLinks a {color:#666666; text-decoration: none;}
.appleLinksWhite a {color:#666666; text-decoration: none;}
      ul {
      	padding: 10px;
      	text-align: center!important;
    list-style-position: inside!important;
}    .center{
    margin:0 auto;
    text-align:center;
}
       
        /* End reset */
               
               
                /* These are our tablet/medium screen media queries */
        @media screen and (max-width: 630px){

        body{ background-color: #ffffff; }
                               
                        /* Display block allows us to stack elements */                      
            *[class="mobile-column"] {display: block; }
                       
                        /* Some more stacking elements */
            *[class="mob-column"] {float: none !important;width: 50% !important;}    
                             
                        /* Hide stuff */
            *[class="hide"] {display:none !important;}          
           
                        /* This sets elements to 100% width and fixes the height issues too, a god send */
                        *[class="100p"] {width:100% !important; height:auto !important;}                              /* This sets elements to 100% width and fixes the height issues too, a god send */
                        *[class="stack"] {display:block !important;;

    width:100%; !important;} 
                               
                        /* For the 2x2 stack */                
                        *[class="condensed"] {padding-bottom:40px !important; display: block;}
                       
                        /* Centers content on mobile */
                        *[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
            
            /* left aligns content on mobile */
                        *[class="left"] {text-align:left !important; width:100% !important; height:auto !important;}    
                       
                        /* 100percent width section with 20px padding */
                        *[class="100pad"] {width:100% !important; padding:20px;}
                       
                        /* 100percent width section with 20px padding left & right */
                        *[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
                       
                        /* 100percent width section with 20px padding top & bottom */
                        *[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
                       
               
        }
                        *[class="appleLinksGray"] 
        {color:#666666 !important; text-decoration:none !important;}
                       
               
        }
        
                       
       
    </style>
   
   
</head>
 
 
<div style="background-color: #687079;">
 
<body style="padding:0; margin:0; background-color: #687079;">
     <div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Lorem ipsom dolor corjs hrnnmeo.</div>
 
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%" class="100p">
    <tr>
        <td align="center" valign="top" style="background-color: #687079;" class="100p">
       
            <table width="640" border="0" cellspacing="0" cellpadding="0" class="hide" style="background-color: #687079;" class="100p">
            </table>
           
            <table width="640" cellspacing="0" cellpadding="0" bgcolor="ffffff" class="100p">
                <tr>
                    <td style="background-color: #687079;" width="640" valign="top" class="100p">
            
             <tr>
            <td bgcolor="#ffffff" style="padding:0;">
            <div align="center">

                <!-- Table used to set width of email -->

                <table class="container" width="640" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td bgcolor="#ffffff">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="center" align="center" valign="middle" style="font-family:Arial, Geneva, sans-serif; font-size:22px; color:#4379bc; margin: 0 auto !important; padding-top:0px; padding-right:12px; padding-bottom:0px; padding-left:12px; font-weight:bold;"><a href="https://google.com" target="_blank" alias="When it’s time to think 
about insurance: Link" style="text-decoration:none;"><img alt="When it’s time to think 
about insurance,: Image" class="100p" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/600x250_email_banner_746_17.jpg" width="600" height="238" border="0" style="text-decoration:none;"/></a></td>  
                                    </tr>
                                </table></td>
                            </tr>
                        </table></td>
                    </tr>
                </table>
            </div></td>
        </tr>       
            
   <tr>
  
              <td class="100p" style="background-color: #687079; padding:0;"><div align="center">
        
               <!-- Table used to set width of email -->
        
                   <table class="100p" width="640" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0">

                    <tr>
                        <td class="mobile-column" valign="top" bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          
</table> <table width="640" border="0" cellspacing="0" cellpadding="30" style="background-color:#ffffff;" class="100p">
<tr>
    <td align="center" style="background-color:#ffffff; font-size:16px; color:#000000;"><font face="Arial, sans-serif"><span style="font-size:16px;">     

<br><span style="font-size:30px; color:#00539c;"><b>Insurance that’s not just … Insurance</b></span><br>
           
 <br> 
<p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 <br>
 <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
 <br>
     

                                                             <!-- First Button : Begin -->
                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                                    <tr style="background-color: #ffffff;"> 
                                        <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                                            <a href="https://www.google.com" style="color: #ffffff !important; background:##5291bc; border: 15px solid #00539c; mso-padding-alt: 10px 0; padding: 0 12px;  font-family: Arial, sans-serif; font-size: 18px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
                                                <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">REQUEST A QUOTE</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                                            </a>
                                        </td>
                                        
                                    </tr>                                           
    </table>
<!-- First Button : END -->  </tr>
                       
          
                  <table width="640" border="0" cellspacing="0" cellpadding="0PX" style="padding: 0px; background-color:#ffffff;" class="100p">
                <tr>
                    <td align="CENTER" style="padding: 0px; background-color:#ffffff; font-size:16px; color:#666666;"><span style="color: #666666; font-family:Arial,sans-serif;font-size: 18px;line-height: normal;text-align: -webkit-center;"><span style="font-size:16px; line-height:0px;"><b> &ndash; OR &ndash;</span></a> <br>
</b>
                          </span><br>
                
                        
                    </td>
                    
                    
                </tr>



                      
                                                             <!-- Second Button : Begin -->
                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                                    <tr style="background-color: #ffffff;"> 
                                        <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                                            <a href="tel:888-671-8000" style="color: #ffffff !important; background:##5291bc; border: 15px solid #00539c; padding: 0 12px;  font-family: Arial, sans-serif; font-size: 18px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
                                                <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">CALL NOW</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                                            </a>
                                        </td>
                                        
                                    </tr>                                           
    </table>
<!-- Second Button : END -->  </tr>
    
            
                 
                      
                
            
       <!-- END Table used to set width of email -->

      
            

       
   </tr>
        </td>
    </tr>
</table>
   <img src="http://www.google-analytics.com/collect?v=1&t=event&tid=UA-2584670-1&cid=3333&ec=email&ea=open&cs=exacttarget&cm=email&cn=insl2q&dr=exacttarget&el=Request%20a%20quote%20for%20insurance%20from%20AAA%20today." />

</body>
</html><custom name="opencounter" type="tracking">

jsfiddle.net/8u7x9cdu/

Answer 1

我在审核您的代码时发现了两件事。

有一些未关闭的标签和不平衡的<table>。关闭</tr>而不先关闭<td>。
通过将所有内容放入其自身的<td> for Outlook中，可以更安全地解决问题。使用<br>并不总是在其自己的行上放置一个元素，但将它放在一个新的<tr><td>中。我已经使用按钮更新了代码部分，看起来更像是这样：

＆＃13;

    <tr>
        <td>
            <!-- First Button : Begin -->
            <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                <tr style="background-color: #ffffff;"> 
                    <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                        <a href="https://www.google.com" style="color: #ffffff !important; background:##5291bc; border: 15px solid #00539c; mso-padding-alt: 10px 0; padding: 0 12px;  font-family: Arial, sans-serif; font-size: 18px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
                            <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">REQUEST A QUOTE</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                        </a>
                    </td>
                </tr>                                           
            </table>
            <!-- First Button : END -->
        </td>
    </tr>

    <tr>
        <td>
            <table width="640" border="0" cellspacing="0" cellpadding="0PX" style="padding: 0px; background-color:#ffffff;" class="100p">
                <tr>
                    <td align="CENTER" style="padding: 20px 0px; background-color:#ffffff; font-size:16px; color:#666666;"><span style="color: #666666; font-family:Arial,sans-serif;font-size: 18px;line-height: normal;text-align: -webkit-center;"><span style="font-size:16px; line-height:0px;"><b> &ndash; OR &ndash;</span></a></b><br></span>
                    </td>
                </tr>
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <!-- Second Button : Begin -->
            <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #ffffff; color:#ffffff !important; Margin: auto;">
                <tr style="background-color: #ffffff;"> 
                    <td style="border-radius: 3px; background: #00539c; color: #ffffff !important; text-align: center;" class="button-td"> 
                        <a href="tel:888-671-8000" style="color: #ffffff !important; background:##5291bc; border: 15px solid #00539c; padding: 0 12px;  font-family: Arial, sans-serif; font-size: 18px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
                                <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--><font color="#FFFFFF">CALL NOW</font><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                        </a>
                    </td>
                </tr>                                           
            </table>
            <!-- Second Button : END -->
        </td>
    </tr>

＆＃13;

您可能需要摆弄填充和线条高度，但是这样的内容将显示您在所有恼人的Windows桌面Outlook中寻找的布局。

Answer 2

Clay，我已经解决了你的按钮问题。我应该指出你也有gmail的问题。如果你看着Litmus，你可以自己确定一下。我不相信你真的关注Litmus，因为我在回复之前就自己运行了你的代码。

你也遇到过Yahoo，outlook.com，gmail，iPhone，Android，Windows 10 Mail的问题。

我还记得我上周试图帮助你解决同样的问题。在您之前发布的电子邮件问题（查看Clay的声誉小组）中，人们会继续为您提供可靠的建议，而您从未关注它，向我们提供有关其工作原理或表现出任何赞赏的反馈。我这样说的原因是你一遍又一遍地发布相同的问题，你的代码一遍又一遍地显示相同的问题。

Stack Overflow为您提供了所放入的内容。如果您只是放弃我们的建议，有什么动力可以帮助您？

我很乐意让你失败并失败。我学到的方法是，我在Stack Overflow上查找问题，并且让你不再伤害可能会严肃对待电子邮件开发的其他人。因此，作为一个额外的提醒，Outlook不支持填充和边距：

https://litmus.com/help/email-clients/outlookcom-margins/

这意味着如果您为按钮高度设置填充，则它无法在Outlook中运行。

Outlook不适用于只有数字的行高值。所以行高：1.1将被忽略，因为它不明白。 line-height: 40px;将被阅读并运作。您可以使用另一个标记来帮助强制Outlook遵循行高，将其直接放在行高之前：mso-line-height-rule: exactly;了解更多：

https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/

祝你好运。

Outlook 07,10按钮填充问题电子邮件

2 个答案: