Outlook中的左对齐表，用于蒸发父div容器边框

Question

我正在尝试升级我的HTML电子邮件，以便每篇文章中的图片允许以下段落的文字环绕它。我读到在align="left"表中包含这样的图像是最好的，而不是将该属性放在公开的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严格代码* ：

<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标签，我遇到的问题是图像顶部和开头之间出现空行文本 - 任何包含包装文本的块元素都会导致链接图像出现此问题：

通过实验将图像本身嵌套在自己的单细胞表中并将那个对齐到左侧，我能够用一块石头杀死两只鸟（还有很多额外的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

也许您尝试添加保证金：8px;属性为TABLE样式？

8px只是一个例子，我认为2px一样好

Answer 2

我会提供一个我知道可行的解决方案，而不是尝试调试：

<!-- 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图像中添加了一个透明的“填充”。