响应式四列表格在Outlook 2010、2016版本中无法正常渲染问题

Outlook 2010、2016版本采用Microsoft Word作为HTML渲染引擎，对自适应布局、浮动对齐的支持存在很多原生缺陷，你的代码存在两处核心错误直接导致布局错乱：

• 第四张图片对应的列前缺失MSO专属条件注释，Outlook无法识别到第四列需要单独占用一个单元格，前三个列挤在同一个单元格内后剩余空间不足，第四张图就会自动换行
• 四列的宽度定义不一致，部分列的width属性和style属性内的宽度值不匹配，总宽度超出了父容器520px的限制

1. 统一四列宽度：父容器总宽度为520px，平分到4列每列固定为130px，所有列外层table的width属性和style内的width属性保持完全一致，不要出现127px和130px混用的情况
2. 补全第四列前的MSO条件注释，确保Outlook可以把4个列分别放到4个独立的td中
3. 给所有带链接的img添加border="0"属性，避免Outlook默认给带链接的图片渲染蓝色边框
4. 给包裹列的父table单元格添加mso-table-lspace:0;mso-table-rspace:0样式，清除Outlook给table添加的默认左右边距

<tr>
  <td valign="top" align="center" style="mso-table-lspace:0;mso-table-rspace:0;">
    <table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="left">
      <tr>
        <td style="width: 130px; height: 20px;" valign="top" align="center">
          <!-- 第一列 -->
          <table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
            <tr>
              <td class="em_ptop" style="vertical-align: top; width: 130px; height: 30px;" align="center">
                <a alias="" conversion="false" data-linkto="https://" href="" title="">
                  <img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 130px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65" border="0">
                </a>
              </td>
            </tr>
          </table>
          <!--[if gte mso 9]></td><td valign="top" width="130"><![endif]-->
          
          <!-- 第二列 -->
          <table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
            <tr>
              <td class="em_ptop" style="width: 130px; height: 30px;" valign="top" align="center">
                <a alias="" conversion="false" data-linkto="https://" href="" title="">
                  <img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 130px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65" border="0">
                </a>
              </td>
            </tr>
          </table>
          <!--[if gte mso 9]></td><td valign="top" width="130"><![endif]-->
          
          <!-- 第三列 -->
          <table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
            <tr>
              <td class="em_ptop" style="width: 130px; height: 30px;" valign="top" align="center">
                <a alias="" conversion="false" data-linkto="https://" href="" title="">
                  <img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 130px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65" border="0">
                </a>
              </td>
            </tr>
          </table>
          <!--[if gte mso 9]></td><td valign="top" width="130"><![endif]-->
          
          <!-- 第四列 -->
          <table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
            <tr>
              <td class="em_ptop" style="width: 130px; height: 30px;" valign="middle" align="center">
                <a alias="" conversion="false" data-linkto="" title="">
                  <img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 130px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65" border="0">
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

修改后重新在Litmus测试即可兼容Outlook 2010、2016版本。

内容的提问来源于stack exchange，提问作者Goodzie6998