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

这是做到这一点的怪癖模式。在 quirks 模式下，两个相邻的浮动表不会换行到下一行。您可以通过从页面中删除 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>

（并根据需要重复多次）

Answer 2

我知道您具体询问的是 Thunderbird，但我假设您要发送给多个客户。

在 Outlook 中根本不支持 CSS 浮动，因此很遗憾，您一直使用的 align="left" 是主要客户支持在 html 电子邮件中“浮动”的唯一方法。

尝试将align="left" 添加到您的父表<td>。此外，为了使 align 起作用，您可能必须在 html width="600" 中设置宽度（例如）。

此外，Outlook 不支持最大宽度，您应该始终在 html 电子邮件中使用 6 位十六进制颜色声明。