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並不總是像在網絡上一樣工作。

在父<table>包裝紙兩個<tables>將在每一個主要的電子郵件客戶端顯示由每方柱側：

<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> 

Answer 2

試試這樣說：

<table style="display:inline-block; margin-top:20px; margin-left:20px; margin-bottom:20px;" width="306px" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td align="center" style="width:150px; -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> 
     <td style="width:150px;"> 

    <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> 

這樣兩個TD的份額TR