Question

我刚刚遇到Outlook破坏我的HTML电子邮件时遇到的第一个挫折。

我有一个640像素宽的容器表。在它是两个320px表，一个左对齐，一个右对齐。它们并排在除Word Engined Outlook（2007及更高版本）之外的所有电子邮件客户端中。

这是重要的部分。我有代码在手机上查看时使包含表变为320px宽。这会强制两个表一个在另一个之上。这完全按照计划用于手机。

但桌面上的Outlook呈现左对齐的表格，然后在它下方呈现左下方的右手表，但仍然向右对齐，在左手桌下方形成一个大的间隙，右手上方有一个大的间隙表

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    img 
    {display:block;}
    a 
    {text-decoration:none;}
    a:hover
    {text-decoration: underline !important;}
    td.contentblock p { 
        color:#FFFFFF;
        font-size:16px;
        font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
        margin-top:0;
        margin-bottom:12px;
        padding-top:0;
        padding-bottom:0;
        font-weight:normal;
    }
    td.contentblock p a { 
        color:#e45808;
        text-decoration:none;
    }
    .heading {
        font-size:24px;
        font-weight:bold;
    }
    @media only screen and (max-device-width: 480px) {
         table[class="table"], td[class="cell"] {
              width: 320px !important;
         }
        td[class="footershow"] {
              width: 320px !important;
         }
        table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
              display: none !important;
         }
         img[class="divider"] {
              height: 1px !important;
         }
         img[id="header"] {
              width: 320px !important;
              height: 69px !important;
         }
         img[id="main"] {
              width: 320px !important;
              height: 45px !important;
         }
         img[id="footer"] {
              width: 320px !important;
              height: 43px !important;
         }
        p[class="reminder"] {
            font-size: 11px !important;
        }
        span[class="secondary"] {
            line-height: 20px !important;
            margin-bottom: 15px !important;
            font-size: 13px !important;
        }
    }
    </style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
    <td bgcolor="#EEEEEE" width="100%">

    <table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
    <tr>
        <td width="640" class="cell" style="color:#FFF;">

        <table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
            <tr>
                <td>
                <a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
                </td>
            </tr>
            </table>
            <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
            <tr>
                <td>
                <a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
                </td>
            </tr>
            </table>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    </td>
</tr>
</table>                         

</body>
</html>

如果有人可以帮我找到一种方法在Outlook中仍然有我的两个并排表，但仍然让它们在手机中重新对齐，我会非常感激。

Answer 1

我发现你需要在表之间允许25px，以防止Outlook像这样堆叠它们。

另一种解决方案是使用Outlook的条件代码将每个表包装在包装表的单元格中。这意味着在Outlook中，它们都将位于表的同一行，因此它们不可能崩溃。

<!--[if (gte mso 9)|(IE)]>
 <table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td width="50%">
<![endif]-->

(Left table goes here)

<!--[if (gte mso 9)|(IE)]>
   </td>
   <td width="50%">
<![endif]-->

(Right table goes here)

<!--[if (gte mso 9)|(IE)]>
   </td>
  </tr>
 </table>
<![endif]-->

(gte mso 9)将针对所有版本的Outlook 2000及更高版本，但实际上Outlook 2000,2002和2003使用IE渲染并且无法识别该代码，这就是为什么你也使用{{1}在条件if语句中。

Answer 2

快速回答是使内表的宽度减小几个像素。就目前而言，Outlook在它们之间添加了几个像素，导致320 +（几个像素）+ 320＆gt; 640.

更准确的方法是添加mso-table-lspace和mso-table-rspace以缩小差距。请参阅this example。

在Outlook 2007及更高版本中强制使用电子邮件中的html并排表格

2 个答案: