《EDM专栏》问题展望

Question

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

我已经使用<table>标签对其进行了编码。我有一个部分，这应该显示为桌面上的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>