12

众所周知，Outlook 2007 使用了 Word 2007 的渲染引擎，在设计 HTML 电子邮件时会引起无尽的悲痛。[在此处插入咆哮] 特别是，浮动、边距和填充是 - 我们可以说吗？- 支持不佳。

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

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

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

有谁知道任何其他解决方法？

4

6 回答 6

19

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

[ img src="image.jpg" align="left" 边框="0" hspace="10" ]

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

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

于 2011-08-05T15:42:22.447 回答
7

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

左边框：7px 实心#fff；

例如，在白色容器内会产生左填充的视觉效果....

于 2010-08-18T10:46:47.150 回答
6

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 需要此 hack。如果没有 Litmus，其他一切看起来都很棒。

于 2013-07-11T02:53:08.200 回答
2

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

img {  
    padding-left: 25px!important;  
    padding-top: 25px!important;  
    padding-bottom: 25px!important;  
    padding-right: 25px!important;  
}
于 2012-02-29T14:27:55.900 回答
0

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

于 2010-08-17T21:48:54.263 回答
-3

如果您使用这样的边距命令将内联样式添加到 img 标签：

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

我猜这就是你想要做的。

于 2010-04-24T18:13:51.097 回答