1. 首頁
  2. 問答
  3. HTML電子郵件中出現水平間隙

HTML電子郵件中出現水平間隙

2016-04-27 477 views
0

我們發送的電子郵件的佈局已經有一段時間了。正如你將在下面看到的那樣，當電子郵件在Outlook中呈現時，它似乎顯示了額外的橫向空白/空格。但是，當您查看Web版本的電子郵件時，電子郵件顯示效果非常好，所以我不能100％確定這些額外的差距來自哪裏。任何人都可以在代碼中看到任何可能導致這些差距的東西嗎？HTML電子郵件中出現水平間隙

***請注意，我們無權自行編輯代碼，因爲我們的電子郵件營銷供應商控制着這一點，但我們可以向他們提供改進建議。

我已經提供儘可能多的代碼，我可以（我也使代碼匿名）。附加的圖像顯示了Outlook中的電子郵件的外觀以及它在Web版本中的外觀（應該看起來像）。

任何幫助將不勝感激。提前致謝。

Example of email in Outlook Web version

<!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" xml:lang="en" lang="en"><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>CHRIS TEST EMAIL</title> 

<!--[if gte mso 9]> 
<style> 
ul {margin-top:0px;margin-right:0px;margin-left:24px !important;} 
ul li {margin-top:0px;margin-right:0px;padding-left:2px !important;margin-bottom:2px;} 
ul ul {margin-top:10px !important;margin-right:0px;margin-left:24px !important;margin-bottom:15px !important;} 
ol {margin-top:0px;margin-right:0px;margin-left:0px;margin-bottom:15px !important;} 
</style> 
<![endif]--> 
</head> 
<body class="page-bg" style="margin:10px;padding:0;font-family:Arial, Helvetica, sans-serif;color:#313131;background:#e3e3e3;height:100%;width:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none"> 
<div align="center" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
    <table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" class="whiteBg" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#ffffff"> 
    <tr> 
     <td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
      <tr> 
      <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
       </tr> 
       </table></td> 
      <td width="660" style="-webkit-text-size-adjust:none"><table border="0" cellspacing="0" cellpadding="0" width="660" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td height="10" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px">&nbsp;</td> 
       </tr> 
       <tr> 
        <td align="center" style="-webkit-text-size-adjust:none"><div id="txt_01" class="vx_text smallText" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
         <p align="center" style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:12px;font-size:11px;line-height:12px;color:#313131;font-family:Arial, Helvetica, sans-serif">To view a web version of this email please <a href="http://example-code.com/chris-test-email(1).asp" style="-webkit-text-size-adjust:none;color:#313131;text-decoration:underline">click here</a></p> 
        </div></td> 
       </tr> 
       <tr> 
        <td height="5" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px">&nbsp;</td> 
       </tr> 
       </table></td> 
      <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
       </tr> 
       </table></td> 
      </tr> 
     </table></td> 
    </tr> 
    <tr> 
     <td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
      <tr> 
      <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
       </tr> 
       </table></td> 
      <td align="left" width="660" style="-webkit-text-size-adjust:none"><a href="http://example-code.com%2f" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http:///example-code.com/images/logo.jpg" alt="Example &amp; Company" width="180" height="40" border="0" style="display:block;border:none"></a></td> 
      <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
       </tr> 
       </table></td> 
      </tr> 
     </table></td> 
    </tr> 
    <tr> 
     <td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
      <tr> 
      <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
       </tr> 
       </table></td> 
      <td align="left" width="330" class="colourText" style="-webkit-text-size-adjust:none"><div id="txt_02" class="vx_text colourText" style="margin:0;padding:0;-webkit-text-size-adjust:none"><p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#663366;font-family:Arial, Helvetica, sans-serif">Your update</p></div></td> 
      <td align="right" width="330" class="colourText" style="-webkit-text-size-adjust:none"><div id="txt_03" class="vx_text colourText" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
       <p align="right" style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#663366;font-family:Arial, Helvetica, sans-serif">Issue 000 | January 2015</p> 
       </div></td> 
      <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
        <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
       </tr> 
       </table></td> 
      </tr> 
     </table></td> 
    </tr> 
    <tr> 
     <td style="-webkit-text-size-adjust:none"><div id="img_01" class="vx_image banner" style="margin:0;padding:0;-webkit-text-size-adjust:none"><img src="http://example-code.com/images/image.jpg" alt="Updating you on issues" width="700" height="149" style="display:block"></div></td> 
    </tr> 
    <tr> 
     <td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
      <tr> 
      <td width="182" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2fwhoweare%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b1.jpg" alt="Who we are" width="182" height="28" border="0" style="display:block;border:none"></a></td> 
      <td width="166" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2flegalservices%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b2.jpg" alt="What we do" width="166" height="28" border="0" style="display:block;border:none"></a></td> 
      <td width="166" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2fstayinformed%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b3.jpg" alt="Stay informed" width="166" height="28" border="0" style="display:block;border:none"></a></td> 
      <td width="186" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2flinks%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b4.jpg" alt="Online resources" width="186" height="28" border="0" style="display:block;border:none"></a></td> 
      </tr> 
     </table></td> 
    </tr> 
    </table> 
    <table border="0" cellspacing="0" cellpadding="0" width="700" bgcolor="#FFFFFF" class="whiteBg" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#ffffff"> 
    <tr> 
     <td height="20" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px">&nbsp;</td> 
    </tr> 
    </table> 
    <table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" class="whiteBg" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#ffffff"> 
    <tr> 
     <td align="left" valign="top" style="-webkit-text-size-adjust:none"><div id="col_01" class="vx_drag vx_blocks_file_blocks_left_column left_column" style="margin:0;padding:0;-webkit-text-size-adjust:none"><div id="blk_01" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       <td width="440" valign="top" align="left" style="-webkit-text-size-adjust:none"><div id="txt_04" class="vx_text text" style="margin:0;padding:0;-webkit-text-size-adjust:none"><p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#313131;font-family:Arial, Helvetica, sans-serif">Dear Chris</p> 
<p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#313131;font-family:Arial, Helvetica, sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus nibh nec tortor condimentum, ut ullamcorper turpis consectetur. Mauris elementum dictum venenatis.</p></div></td> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       </tr> 
      </table> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td height="10" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px">&nbsp;</td> 
       </tr> 
      </table> 
      </div> 
<div id="blk_02" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       <td height="1" width="440" class="line" style="-webkit-text-size-adjust:none;border-top:solid 1px #CCCCCC;font-size:1px;line-height:1px"><img src="http://example-code.com/images/spacer.gif" alt="spacer" width="1" height="1" style="display:block"></td> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       </tr> 
      </table> 
      </div> 
<div id="blk_03" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       <td width="440" valign="top" align="left" style="-webkit-text-size-adjust:none"><div id="txt_05" class="vx_text text" style="margin:0;padding:0;-webkit-text-size-adjust:none"><h3 style="margin:0;padding:0;font-size:14px;line-height:16px;color:#663366;color:#663366 !important;font-weight:normal;margin-bottom:14px;font-family:Arial, Helvetica, sans-serif"><strong>Subheading 1</strong></h3> 
<p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#313131;font-family:Arial, Helvetica, sans-serif">Mauris commodo tempor dignissim. Integer gravida urna non venenatis maximus. Integer a vehicula urna. In bibendum nisl id urna fringilla hendrerit. Sed id nunc sed orci auctor ornare id quis nibh.</p></div></td> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       </tr> 
      </table> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td height="10" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px">&nbsp;</td> 
       </tr> 
      </table> 
      </div> 
<div id="blk_04" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       <td height="1" width="440" class="line" style="-webkit-text-size-adjust:none;border-top:solid 1px #CCCCCC;font-size:1px;line-height:1px"><img src="http://example-code.com/images/spacer.gif" alt="spacer" width="1" height="1" style="display:block"></td> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td> 
       </tr> 
      </table> 
      </div> 
<div id="blk_05" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none"> 
      <table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
       <tr> 
       <td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt"> 
        <tr> 
         <td width="20" style="-webkit-text-size-adjust:none">&nbsp;</td> 
        </tr> 
        </table></td>

來源

2016-04-27 user2280513

回答

0

好，這裏是個壞消息，開發HTML電子郵件時，你需要檢查他們在每一個郵件客戶端（例如Gmail時，展望，雅虎），每一個網絡上瀏覽器（例如Chrome，Firefox，Internet Explorer）和每個電子郵件客戶端（例如Apple Mail，Outlook，Thunderbird）。

你不能只在網頁上查看它，檢查它是否正常，你需要將它發送到儘可能多的不同帳戶，你可以檢查它在每一個。請參閱https://emailclientmarketshare.com/瞭解最受歡迎的電子郵件客戶端列表。

電子郵件中的HTML不是標準化的，所以對於任何給定的瀏覽器/客戶端都有很多怪癖。有關更好的解釋，請參閱Campaign Monitor中的"What’s so hard about HTML emails?"。

很難在不發送郵件的情況下對郵件進行調試，所以我現在不能再做進一步的了。但我很樂意稍後再看看。

來源

2016-04-27 12:31:27 Sarcoma

+0

另一件需要考慮的事情是，很多人最近在手機上查看電子郵件，所以它也應該可以在手機上使用。 – Sarcoma

0

我相信很多問題都來自於內容使用段落和標題標籤的事實，這可能會導致結果大幅變化。大多數「防彈」HTML電子郵件僅依賴於表格，並且將txt標籤的樣式應用於設置字體大小，線條高度等。如果刪除所有p和h4標籤，並將填充樣式添加到周圍的單元標籤，它應該照顧很多你的問題。

另一個方便的技巧是將mso-line-height-rule: exaclty;添加到您的造型。這將適用於Outlook（特別是2013年），以符合您設置的行高並且不會增加額外的空間。

來源

2016-05-02 23:15:10

相關問題

 相關問題