css - Outlook 中的左对齐表蒸发父 div 容器边框

Question

我正在尝试升级我的 HTML 电子邮件，以便每篇文章中的图像允许以下段落的文本环绕它。我读到在 align="left" 中包含这样的图像table 是最好的，而不是将该属性放在公开的 img 上元素。

我已经让它适用于所有非 Outlook 电子邮件客户端，但尽快 align="left"属性被添加到图像的表容器中，div包含对齐表格和换行文本(单个 p 元素)的渲染没有边框 - 但仅在对齐表格似乎邻接的地方(左侧和上方缺少部分)边界)。

这很奇怪。正如您在 Outlook 之前/之后所看到的，容器上的边框样式 div当表格未左对齐时呈现良好。

我能做些什么来阻止对齐的表格破坏容器 div 的边框样式吗？我希望避免将 HTML 扩展到更多表格或使用图像间隔符；如果不是因为这个晦涩的问题，我的div如您所见，css 在 Outlook 中运行良好。

所需内容的屏幕截图以及在 Apple Mail 中呈现的代码外观，例如(添加黄色表格背景颜色以强调并表示 td 填充):

Outlook '07 之前 添加 align="left"表的属性:

Outlook '07 之后 添加 align="left"表的属性:

事不宜迟，XHTML 1.0 Strict 代码*:

<div class="content" style="border-left-width: 8px; border-left-style: solid; border-top: 1px dotted #bababa; padding-left: 17px; padding-bottom: 15px; padding-top:25px; border-left-color: #0c63b8;">
  <table bgcolor="yellow" width="160" cellpadding="0" cellspacing="0">
    <tr>
      <td width="160" style="padding-right: 20px; padding-bottom: 20px;">
        <a href="#"><img src="http://www.eastendhouse.org/sites/default/files/imagecache/eNews-small-160/images/news/IMG_1547.JPG" alt="" title="" width="160" height="120" border="0" style="vertical-align: bottom;" /></a>
      </td>
    </tr>
  </table>
  <p style="margin: 0; padding: 0; margin-bottom: 13px; margin-top: 0px !important;">Et quinta decima eodem modo, typi qui nunc nobis videntur parum clari fiant sollemnes in. Quam littera gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima. Tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Typi non habent claritatem insitam est, usus legentis in iis. Sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Claritatem Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius! Eu feugiat nulla, facilisis at vero eros et accumsan et iusto odio. Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber assum qui.</p>
</div>

- 此代码不包括 <h2> div.content 上方的元素元素，但如果有帮助，我可以稍后包含。

---

扩展解决方案

在@john 的指导下将文本放在与左对齐图像相同的表格单元格中之后，我用包含 div 描述的奇怪问题消失了，文本被正确包装:

请注意，尽管新的包含表格在右侧添加了奇数空间(表格右侧虚线顶部边框下方的白色列)，但我无法使用此解决方案进行更正。

此外，由于接受的答案不包括图像周围的链接，也不包括 p包含换行文本的标签，我遇到了图像顶部和文本开头之间出现空行的问题 - 任何包含换行文本的 block 元素都会导致链接图像出现此问题:

通过实验性地将图像本身嵌套在它自己的单单元格表格中并将 那个 也向左对齐，我能够用一 block 石头杀死两只鸟(以及许多额外的 HTML，很遗憾)。我还移动了一些容器 div填充/边框样式到新的包含 table :

这阻止了包含表在副本右侧添加空间，并允许我使用包含 td 的图像填充样式(绿色)为我提供图像周围所需的清晰空间。我承认在原始图像中而不是在 HTML 中添加空间是最干净的，但由于这是一封动态生成的电子邮件，它与其父网站共享图像，因此在这种情况下这不是一个选项。

这是在@john 的帮助下最终的工作代码:

<div class="content" style="border-left-width: 8px; border-left-style:solid; padding-bottom: 15px; border-left-color: #0c63b8;">
  <table width="392" border="0" cellpadding="0" cellspacing="0" bgcolor="yellow" style="border-top: 1px dotted #bababa;">
    <tr>
      <td width="392" style="padding-top: 25px; padding-left: 17px;">
        <table align="left" cellpadding="0" cellspacing="0" border="0" bgcolor="green">  
          <tr>
            <td style="padding-right: 20px; padding-bottom: 10px;">
              <a href="#"><img style="margin: 0; border: 0; padding: 0; display: block;" align="left" src="http://www.eastendhouse.org/sites/default/files/imagecache/eNews-small-160/images/news/IMG_1547.JPG" alt="" title="" width="160" height="120" /></a>
            </td>
          </tr>
        </table>
        <p style="margin: 0; padding: 0; margin-bottom: 13px; margin-top: 0px !important;">Lorem ipsum dolor sit amet consectetuer Vestibulum felis tristique morbi eget. Vel leo felis id egestas Vestibulum Fusce lobortis enim netus rutrum. Urna Aliquam dis consequat neque orci leo pellentesque semper leo accumsan. Est lacus Vestibulum rutrum id libero dui consequat ligula interdum Maecenas. In molestie risus iaculis libero turpis faucibus ipsum tincidunt In enim. Consectetuer Donec at tellus mus Pellentesque wisi vitae Maecenas augue tellus. Integer.</p>
      </td>
    </tr>
  </table>
</div>

Answer 1

我不会尝试调试，而是提供一个我知道有效的解决方案:

<!-- Text Padding -->
                          <table width="580" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="005288">
                            <tr>
                              <td width="30">
                              </td>
                              <td width="520">
<!-- Floating Image -->
<img style="margin: 0; border: 0; padding: 0; display: block;" align="left" src="Images/.png" width="250" height="200"
alt="">

<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;">
Lorem ipsum dolor sit amet consectetuer Vestibulum felis tristique morbi eget. Vel leo felis id egestas Vestibulum Fusce lobortis enim netus rutrum. Urna Aliquam dis consequat neque orci leo pellentesque semper leo accumsan. Est lacus Vestibulum rutrum id libero dui consequat ligula interdum Maecenas. In molestie risus iaculis libero turpis faucibus ipsum tincidunt In enim. Consectetuer Donec at tellus mus Pellentesque wisi vitae Maecenas augue tellus. Integer.
<br><br>
Sed id facilisis ipsum enim suscipit Aenean ut lacus euismod cursus. Fermentum Phasellus Ut et nec molestie Quisque enim Vestibulum quis a. Maecenas condimentum Phasellus Nam fringilla aliquet Phasellus malesuada Cum egestas quis. Nibh justo fames ac ante at dolor facilisi vel Nulla et. Laoreet ut laoreet Curabitur libero dictumst cursus Nunc vitae sem orci. Pellentesque convallis pretium wisi vel interdum morbi Pellentesque et.
<br><br>
Hendrerit quam dui sapien est auctor at ante pretium id interdum. Quis lacus habitant elit non felis Curabitur congue lacus dui Curabitur. Elit dui a ac risus iaculis risus justo condimentum Vestibulum habitasse. Curabitur sed neque tempus congue tortor rutrum Donec et vitae congue. Tellus ipsum mi semper netus egestas Sed laoreet netus Proin elit. Ac sed Morbi.
</font>

                              <td width="30">
                              </td>
                            </tr>
                          </table>

您可以在图像上使用 padding-right 和 padding-bottom，但为简单起见，在我的示例中，我在 png 图像中放置了一个透明的“填充”。