2017-07-24 164 views
-1

我是石蕊试验一个非常简单的电子邮件。显然,在这两个特定的浏览器中,它与按钮重叠并完全删除,并且在那里有空格: 请参阅附件中的图片,并查看我的小提琴/代码片段以获取完整的代码,谢谢。提前帮助你。Outlook 07,10按钮填充问题电子邮件

enter image description here

<!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 { 
 
     \t padding: 10px; 
 
     \t 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/

回答

1

我注意到在审查你的代码两件事情。

  1. 有一些未封闭的标签和不平衡<table> s。如果没有先关闭<td>,请小心关闭</tr>

  2. 将Outlook中的所有内容都放在它自己的<td>中可以更加安全。使用<br>并不总是在它自己的行上放置一个元素,但将它放在新的<tr><td>中。我已经更新了部分代码与按钮看上去就像这样:

<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>


您可能需要反复折腾的填充和行高,但是像这样的东西会在所有烦人的Windows桌面展示中显示你正在寻找的布局。

0

粘土,我有一个解决您的按钮问题。我应该指出你对gmail也有问题。如果你在石蕊中看过,你可以自己确定一下。我不相信你真的关注Litmus,因为我在自己的回复之前就自己运行了你的代码。

你也有雅虎,outlook.com,Gmail,iPhone,Android,Windows 10邮件的问题。

我还记得我上周在相同的问题上试图帮助你。在之前发布的电子邮件问题中(检查Clay的声望面板),人们会不断给您提供可靠的建议,而您从未遵循过它,向我们反馈了它的工作原理或表现出的任何赞赏。我之所以这么说,是因为你一遍又一遍地发布相同的问题,你的代码一遍又一遍地显示相同的问题。

堆栈溢出给你,你放什么。如果你只是要吹掉我们的建议,是什么动机来帮助你?

我很乐意让你失败。我学到的方法是,我在Stack Overflow中查找了一些问题,并且让你伤害了可能认真对待电子邮件开发的其他人。因此,作为一个额外的提醒,Outlook不与填充和利润的工作:

这意味着,如果你设置你的填充的按钮高度,它不会在Outlook中工作。

对于只有数字的行高值,Outlook不起作用。所以line-height:1.1会被忽略,因为它不理解。 line-height: 40px;将被阅读和工作。你可以用它来帮助强制Outlook附加的标签服从线高度,使其直接在行高的前面放置此:mso-line-height-rule: exactly;了解更多:

好运。