强制Thunderbird中的html电子邮件在容器中浮动元素

Question

我有一个问题,Thunderbird没有根据父宽度清除内部表.

顶部图像显示了它应该如何显示,底部显示它在Thunderbird中的外观.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top"> 

        <table cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 600px; width: 100%; table-layout: fixed; background:  red;">
            <tr>
                <td valign="top">

            <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>

          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>


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

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

如果我将内部表更改为一个非常长的段落,那么文本将按预期进行换行.我需要将表格简单地浮动到彼此旁边,以便它可以在不支持媒体查询的Outlook或手机中运行.

这个实例说明它在Firefox中正常工作:http://codepen.io/anon/pen/ioBdw

Answer 1

这就是怪癖模式.彼此相邻的两个浮动表不会以怪癖模式换行到下一行.您可以通过从页面中删除DOCTYPE声明来检入Firefox; 那么它的行为与Thunderbird相同.

所以...要么找到一种在标准合规模式下发送电子邮件的方法,要么确保没有浮动表.

执行后者的一种方法是将每个内部表包装在浮动的div中.浮动div是可以的,即使浮动表不是(不要问为什么;它是怪癖模式).

<div style="float:left" align="left">
 <table cellpadding="0" cellspacing="0" border="0" style="width: 100px; table-layout: fixed; background: lime;" align="left">
  <tr>
   <td>test</td>
  </tr>
 </table>
</div>

(并根据需要重复多次)