Question

我正在格式化HTML电子邮件，它似乎可以在多个浏览器上运行 - 但似乎Outlook在Chrome和IE上的效果不佳。我做了一些研究，并且知道这是我遗漏的东西 - 我已经在我的所有图像中包含了<border="0" style="display: block;">并且在头部包含了表格折叠命令：

{
    border-collapse: collapse;
}

table

然而，在上述浏览器中，它仍无法在Outlook中运行。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>SSTM-PSD_email- FINAL</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <style type="text/css">
        body{
            width:100%;
            background-color:#ffffff;
            margin:0;
            padding:0;
        }
        table{
            border-collapse:collapse;
        }
        table,td,th{
            border:0;
        }
</style></head>
  <body yahoo="fix" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table id="Table_01" width="600" border="0" cellpadding="0" cellspacing="0" style="height:1424px;">
      <tr>
        <td colspan="2" rowspan="2">
          <a href="http://www.southernsoils.com" target="_blank">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email_01_uhhway.png" width="112" height="77" border="0" style="display: block;" alt="SSTM-PSD_email_01_uhhway.png">
          </a>
        </td>
        <td colspan="3" rowspan="2">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_02_zhnbtq.jpg" width="234" height="77" border="0" alt="" style="display: block;">
        </td>
        <td>
          <a href="http://www.southernsoils.com/about.html" target="_blank">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email_03_im3rnp.jpg" width="59" height="53" border="0" alt="" style="display: block;">
          </a>
        </td>
        <td rowspan="2">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_04_bc73iu.jpg" width="17" height="77" border="0" alt="" style="display: block;">
        </td>
        <td>
          <a href="http://www.southernsoils.com/services-and-solutions.html" target="_blank">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email_04_nn4m6d.jpg" width="72" height="53" border="0" alt="" style="display: block;">
          </a>
        </td>
        <td rowspan="2">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_06_zvyubc.jpg" width="20" height="77" border="0" alt="" style="display: block;">
        </td>
        <td>
          <a href="http://www.southernsoils.com/contact.html" target="_blank">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email_05_xzvndy.jpg" width="71" height="53" border="0" alt="" style="display: block;">
          </a>
        </td>
        <td rowspan="2">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_08_a5kwvf.jpg" width="15" height="77" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td>
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_09_yg0who.jpg" width="59" height="24" border="0" alt="" style="display: block;">
        </td>
        <td>
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_10_zjyaqu.jpg" width="72" height="24" border="0" alt="" style="display: block;">
        </td>
        <td>
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_11_iniomw.jpg" width="71" height="24" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="11">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_12_g6gbdk.jpg" width="600" height="291" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="11">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_13_dcksnd.jpg" width="600" height="33" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="11">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_14_xigxsd.jpg" width="600" height="410" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="11">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_15_se2wpq.jpg" width="600" height="16" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td rowspan="2">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_16_ataaen.jpg" width="100" height="478" border="0" alt="" style="display: block;">
        </td>
        <td colspan="7">
          <a href="http://www.southernsoils.com/curfewpromo.html" target="_blank">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/LandingPage_nztzrz.jpg" width="394" height="64" border="0" alt="" style="display: block;">
          </a>
        </td>
        <td colspan="3" rowspan="2">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_18_r3kia6.jpg" width="106" height="478" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="7">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_19_txmwcl.jpg" width="394" height="414" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="11">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_20_js5p6s.jpg" width="600" height="90" border="0" alt="" style="display: block;">
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_21_kx0vci.jpg" width="177" height="28" border="0" alt="" style="display: block;">
        </td>
        <td>
          <a href="http://www.southernsoils.com" target="_blank">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/WebAddress_eeisgv.jpg" width="134" height="28" border="0" alt="" style="display: block;">
          </a>
        </td>
        <td colspan="7">
          <a href="mailto:salesadmin@southernsoils.com">
            <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/Email_d4crmz.jpg" width="289" height="28" border="0" alt="" style="display: block;">
          </a>
        </td>
      </tr>
    </table>
    <!-- End Save for Web Slices -->
  </body>
</html>

Answer 1

您似乎还需要为Outlook重置一些内容。尝试将此添加到<style>代码中的CSS：

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

/* What it does: Fix for Yahoo mail table alignment bug. */
table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}

HTML中断电子邮件

1 个答案: