EDM专栏问题展望

Question

我正在构建一个 EDM 电子邮件，我试图让它在多个邮件服务器上看起来一致，并针对不同的设备尺寸做出响应。

我使用<table> 标签对其进行了编码。我有 1 部分应该在桌面上显示为 2 列，在移动设备上显示为 1 列。

这适用于移动设备、gmail、多个浏览器等。但它在 Outlook 上看起来不正确。这些列不会彼此相邻。从外观上看，它们似乎太宽了，无法并排坐着。我继续减小宽度来解决这个问题。但是它不起作用。

<table cellpadding="0" cellspacing="0" border="0" align="center" width="90%">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" width="36%" align="left" class="fullWidthBlockMobile">
                <tr><td height="15"></td></tr>
                <tr>
                    <td valign="top" style="color:#ffffff; font-weight: normal; -webkit-font-smoothing: antialiased;">
                        <font face="'Source Sans Pro', sans-serif, 'Helvetica Neue', Helvetica, Arial">[firstname,fallback=Hi there],</font><br/><br/>
                        <font face="'Source Sans Pro', sans-serif, 'Helvetica Neue', Helvetica, Arial">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</font><br/><br/>
                        <font style="color:#00AFEF; font-weight: bold; -webkit-font-smoothing: antialiased;" face="'Source Sans Pro', sans-serif, 'Helvetica Neue', Helvetica, Arial">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</font><br/><br/>
                    </td>
                </tr>
            </table>

            <table cellpadding="0" cellspacing="0" border="0" width="54%" align="right" class="fullWidthBlockMobile">
                <tr><td height="15"></td></tr>
                <tr>
                    <td align="center" valign="top">
                        <img src="images/card.png" alt="" style="max-width:100%"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

<!--[if mso | IE]> 适用于 Outlook，因此您可以这样尝试

<table cellpadding="0" cellspacing="0" style="font-size:0px;" border="0" width="100%">
  <tbody>
    <tr>
      <td style="text-align:left;vertical-align:top;border:none;font-size:0px;padding:0px;">
        <!--[if mso | IE]>
          <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tbody>
              <tr>
        <![endif]-->
        <!--[if mso | IE]>
            <td width="50%" style="width:50%;">
          <![endif]-->
        <table cellpadding="0" cellspacing="0" style="width:50%;" align="left" border="0">
          <tbody>
            <tr>
              <td style="text-align:left;" align="left" valign="top"></td>
            </tr>
          </tbody>
        </table>
        <!--[if mso | IE]>
            </td>
          <![endif]-->
        <!--[if mso | IE]>
            <td width="50%" style="width:50%;">
          <![endif]-->
        <table cellpadding="0" cellspacing="0" style="width:50%;" align="left" border="0">
          <tbody>
            <tr>
              <td style="text-align:left;" align="left" valign="top"></td>
            </tr>
          </tbody>
        </table>
        <!--[if mso | IE]>
            </td>
          <![endif]-->
        <!--[if mso | IE]>
              </tr>
            </tbody>
          </table>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>