Outlook 不允许表格显示内联块

Question

这是适用于网络浏览器、苹果邮件、ios 邮件的电子邮件代码，但在使用 Outlook 时，这些元素不会显示内联块。关于为什么以及如何解决这个问题的任何想法？我希望按钮和图像保持并排而不是堆叠。谢谢！

<table style="display:inline-block; margin-top:20px; margin-left:20px; margin-bottom:20px;" width="150px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Read More</a></td>
    </tr>
  </table>
  </td>
</tr>
</table>


<table style="display:inline-block; margin-bottom:27px;" width="150" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>

     <a  href="https://www.facebook.com" target="_blank"><img alt="Facebook" style="margin-right:10px; vertical-align: middle;" src="http://media.com/FB-02.png"></a>  
     <a href="https://twitter.com" target="_blank"><img alt="Twitter" style="margin-right:10px; vertical-align: middle;" src="http://media.com/twitter-03.png"></a>

     </td>
   </tr>
</table>

Answer 1

Outlook 对 css 框模型的支持不是很好，因此 display: inline-block; 和 margin 之类的东西并不总是像在网络上那样工作。

将两个 <tables> 包装在父 <table> 中将在每个主要电子邮件客户端中并排显示每一列：

<table cellspacing="0" cellpadding="0" border="0" role="presentation">
  <tr>
    <td width="150" style="padding: 20px 0 20px 20px;">

      <!-- your first table : BEGIN -->
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Read More</a></td>
        </tr>
      </table>
      <!-- your first table : END -->

    </td>
    <td width="150" style="padding-bottom:27px;">

      <!-- your second table : BEGIN -->
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="https://www.facebook.com" target="_blank"><img alt="Facebook" style="margin-right:10px; vertical-align: middle;" src="http://media.com/FB-02.png"></a>  
            <a href="https://twitter.com" target="_blank"><img alt="Twitter" style="margin-right:10px; vertical-align: middle;" src="http://media.com/twitter-03.png"></a>
          </td>
        </tr>
      </table>
      <!-- your second table : END -->

    </td>
  </tr>
</table>

Outlook 不允许表格显示内联块

Outlook not allowing tables to display inline block

email

outlook

html-email

responsive-design

responsive