2017-02-15 118 views
0

響應電子郵件模板不顯示按鈕和頁腳未正確對齊Outlook Web上。附件是outlook web中結果的代碼和屏幕截圖,以及gmail web中顯示的所需輸出。我需要幫助解決它的前景。展望web響應電子郵件

 result in outlook web

expected result in gmail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> 
    <!-- For development, pass document through inliner --> 
    <!--<link rel="stylesheet" href="css/simple.css" />--> 
    <style type="text/css"> 
     * { 
    margin: 0; 
    padding: 0; 
    font-size: 100%; 
    font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
    line-height: 1.65; } 

img { 
    max-width: 100%; 
    margin: 0 auto; 
    display: block; } 

body, 
.body-wrap { 
    width: 100% !important; 
    height: 100%; 
    background: #efefef; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: none; } 

a { 
    color: #f08414; 
    text-decoration: none; } 

.text-center { 
    text-align: center; } 

.text-right { 
    text-align: right; } 

.text-left { 
    text-align: left; } 

.button { 
    display: inline-block; 
    color: white; 
    background: #f6c095; 
    border: solid #f6c095; 
    border-width: 10px 20px 8px; 
    /*font-weight: bold;*/ 
    border-radius: 4px; } 

h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 20px; 
    line-height: 1.25; } 

h1 { 
    font-size: 25px; } 

h2 { 
    font-size: 28px; } 

h3 { 
    font-size: 24px; } 

h4 { 
    font-size: 18px; } 

h5 { 
    font-size: 16px; } 

p, ul, ol { 
    font-size: 16px; 
    font-weight: normal; 
    margin-bottom: 20px; } 

.container { 
    display: block !important; 
    clear: both !important; 
    margin: 0 auto !important; 
    max-width: 580px !important; } 
    .container table { 
    width: 100% !important; 
    border-collapse: collapse; } 
    .container .masthead { 
    padding: 80px 0; 
    background: #3d4a7c; 
    color: white; } 
    .container .masthead h1 { 
     margin: 0 auto !important; 
     max-width: 90%; 
     /*text-transform: uppercase;*/ } 
    .container .content { 
    background: white; 
    padding: 30px 35px; } 
    .container .content.footer { 
     background: none; } 
     .container .content.footer p { 
     margin-bottom: 0; 
     color: #888; 
     text-align: center; 
     font-size: 14px; } 
     .container .content.footer a { 
     color: #888; 
     text-decoration: none; 
     font-weight: bold; } 
    #contactmanager { 
     display: inline-block; 
     color: white; 
     background: #3d4a7c; 
     border: solid #3d4a7c; 
     border-width: 10px 20px 8px; 
     border-radius: 4px; 
    } 

    </style> 
</head> 
<body> 
<table class="body-wrap"> 
    <tr> 
     <td class="container"> 
      <!-- Message start --> 
      <br /> 
      <table> 
       <tr> 
        <td align="center"> 

         <img alt="accesbank-logo" src="images/accessbank.png"/> 
        </td> 
       </tr> 
      </table> 
      <br/> 
     </td> 
    </tr> 
    <tr> 
     <td class="container"> 
      <!-- Message start --> 
      <table> 
       <tr> 
        <td align="center" class="masthead"> 

         <h1>High Account Balance</h1> 

        </td> 
       </tr> 
       <tr> 
        <td class="content"> 
         <h4>Dear Emmanuel Onyeje</h4> 
         <p>Access Bank Checking Account has a high balance of #X. Consider investing this in a higher yielding account such as a fixed/call deposit </p> 

         <p><em>– Bank Team</em> 
         </p> 
         <table> 
          <tr> 
           <td align="center"> 
            <p> 
             <a href="#" id="contactmanager" class="button">Contact Account Manager</a> 
             <a href="#" class="button">Ignore Advice</a> 
            </p> 
           </td> 
          </tr> 
         </table> 


        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="container"> 
      <!-- Message start --> 

      <table> 
       <tr> 
        <td class="content footer" align="center"> 
         <p>Copyright &#169; 2016 <a href="https://www.accessbankplc.com">Access Bank</a>,Powered by <a href="http://neuronah.com">Molib</a> 
         </p> 
         <p>If you do not want to recieve emails from us, you can | <a href="#">Unsubscribe</a> 
         </p> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 
</body> 
</html> 

回答

3

聽起來像是你需要防彈電子郵件按鈕!這是可能得到這樣的電子郵件按鈕,但它需要比它會在Web /電子郵件客戶端體面盒模型的支持,更多的代碼:

<td align="center"> 

    <!-- Button 1 : Begin --> 
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;"> 
     <tr> 
      <td style="border-radius: 4px; background: #f6c095; text-align: center;"> 
       <a href="http://www.google.com" style="background: #f6c095; border: 10px 20px 8px 20px; solid #f6c095; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;""> 
        Contact Account Manager 
       </a> 
      </td> 
     </tr> 
    </table> 
    <!-- Button 1 : END --> 

    <!-- Button 2 : Begin --> 
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;"> 
     <tr> 
      <td style="border-radius: 4px; background: #3d4a7c; text-align: center;"> 
       <a href="http://www.google.com" style="background: #3d4a7c; border: 10px 20px 8px 20px; solid #3d4a7c; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;""> 
        Ignore Advice 
       </a> 
      </td> 
     </tr> 
    </table> 
    <!-- Button 2 : END --> 

</td> 

這是幾個類似的技術之一,outlined on Litmus

+0

有用的鏈接。非常感謝 – user2721794

0

對於這一點,我用一個表:

<table cellpadding="0" cellspacing="0" border="0" width="150" bgcolor="#000000" class="cta-black" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; border-collapse: collapse; mso-padding-alt: 0pt 0pt 0pt 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background: #000000;"> 
    <tbody> 
    <tr> 
     <td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;">&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" mc:edit="selection-1-cta" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"><a href="#" target="_blank" style="border: none; color: #ffffff; text-decoration: none; outline: none !important; font-family: 'Montserrat', sans-serif; font-size: 13px; display: block;">VOIR LE PRODUIT</a></td> 
    </tr> 
    <tr> 
     <td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;">&nbsp;</td> 
    </tr> 
    </tbody> 
</table>