Question

众所周知，Outlook 2007使用Word 2007渲染引擎，在设计HTML电子邮件时引起无尽的悲痛。 [在这里插入咆哮]特别是浮动，边缘和填充 - 我们应该说什么？ - 支持不足。

要模拟浮动，以便文本环绕图像，显然我们可以简单地使用：

<img src="foo.png" align="right">

问题是填充/边距。没有填充/边距，被包裹的文本与看起来愚蠢的图像对接。一种解决方法是编辑图像并添加模拟边距的透明框架。

有没有人知道其他任何变通办法吗？

Answer 1

在阅读了有关Outlook 2007支持的Microsoft文档后，我发现在图像上使用hspace可以在其周围创建类似于填充的空白区域。

[img src =“image.jpg”align =“left”border =“0”hspace =“10”]

这将为您提供相当于10px的填充。在电子邮件客户端中运行良好。

想我会分享以防其他人谷歌搜索这个问题就像我一样偶然发现这个问题。

Answer 2

我今天早上已经尝试过，遗憾的是支持的图像边界，但是，你可以在文本区域实现这个概念:)。

border-left：7px solid #fff;

例如，在白色容器内部会给出左边填充的视觉效果....

Answer 3

Outlook '07支持填充的一个地方是<td>标记。所以我通过将图像包装在表格中来解决这个问题：

<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
    <tr>
        <td>
        <table cellspacing="0" cellpadding="0" border="0" align="left">
        <tbody>
            <tr>
                <td valign="top" style="padding: 0px 10px 0 0;">
                <img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
                </td>
            </tr>
        </tbody>
        </table>
        <p>The text I want to see wrap...</p>
        </td>
    </tr>
</tbody>
</table>

请注意，align="left"位于父表以及立即保存图像的表上。 Outlook 2013需要这个黑客攻击。如果没有它，那么其他一切看起来都很棒。

Answer 4

在Outlook和所有其他电子邮件客户端的图像中添加填充。我发现这很有效。

img {  
    padding-left: 25px!important;  
    padding-top: 25px!important;  
    padding-bottom: 25px!important;  
    padding-right: 25px!important;  
}

Answer 5

我知道这个线程很旧，但另一种方法是给图像一个与容器颜色相同的实线边框。

Answer 6

如果使用如下边距命令向img标记添加内联样式：

<img src="foo.png" align="right" style="margin:5px;">

我猜这就是你要做的事。

Outlook 2007的解决方法是使用边距包装图像周围的文本？

6 个答案: