2017-07-24 165 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;瞭解更多:

好運。