Outlook 2007 的解决方法，用于在带有边距的图像周围环绕文本？

Posted 2023-03-05

【中文标题】Outlook 2007 的解决方法，用于在带有边距的图像周围环绕文本？

【英文标题】：Workaround for Outlook 2007 for wrapping text around image with margin?

【发布时间】：2011-02-11 19:59:34

【问题描述】：

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

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

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

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

有人知道其他解决方法吗？

【参考方案1】：

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

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

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

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

【讨论】：

+ 1 非常感谢您添加此内容。我确实试图找到这个问题的答案。我不想使用 CSS，因为它在所有电子邮件客户端中都没有得到很好的支持。这有很大帮助。

HSPACE 也对我有用 - 似乎是简单的解决方案。 VSPACE 当然也可用于顶部/底部填充。

【参考方案2】：

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

border-left: 7px 实心#fff;

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

【讨论】：

是的，这在 Outlook Mac 2010 和 Hotmail.com/Outlook.com 中对我来说非常有效。它是一种非常好的基础风格，显然在 Webkit 和 Gmail 中表现良好，因为它本质上不是 hack。 +1 无论如何都不再支持 Outlook 2007，它几乎是 2014 年！

对不起 - 我的错。这实际上在 Outlook 2007 中没有任何作用！

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

【讨论】：

您也可以在包含图像的单元格之后使用

而不是使用 css 填充。

@JacobDorman & Ecksley。我已经尝试在 td 容器上填充并在图像之后添加额外的 td 。两者都会产生类似填充的效果。但是 - 由于某种原因，我的文本的前 5px 左右被截断了。就像左对齐的表格在我的文本顶部并隐藏它。你们有过这种经历吗？

【参考方案4】：

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

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

【讨论】：

根据我的测试 Outlook 2007/2010 不支持 img 上的边距、填充或边框。

【参考方案5】：

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

【讨论】：

感谢您的回答。 ;-) 有趣的想法。让我玩它，如果它有效，那么我会接受答案。 [不幸的是，我现在忙得不可开交，所以请给我一些时间来清理我的工作量，然后我会检查一下。]

不工作伙伴 - Outlook 2007 doesn’t show image borders

【参考方案6】：

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

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

我猜这就是你想要做的。

【讨论】：

或者如果你想更精确

感谢您的建议。但从我的直接经验和随后的研究来看，这是行不通的。 Outlook 2007 似乎不支持边距，无论是内联还是其他方式。还有其他想法吗？