Question

当我在电子邮件中包含以下HTML时，Outlook会自动下载该图像：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head><body><div><p><br /></p></div><div style="border-style:solid;border-width:2px;border-color:rgb(0,0,0);background-color:rgb(255,232,0);width:302px;height:185px"><img style="position:relative;z-index:100;left:126px; top:39px;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"/><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: -123px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>John</b></p><br /><br /><br /><br /><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: 0px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>XYZ Company</b></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></body></html>

但是，Outlook不会自动下载以下HTML中的相同图像：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
        div, p {
            margin:0;
            padding:0;
            font-family: Helvetica;
            font-size:14px;
            color:#000;
            font-weight:bold;
        }
        div.box {
            padding:15px;
            width:272px;
            height:155px;
            border:2px solid #000;
            background-color:rgb(255,232,0);
        }
        div.box div.inner {
            height:100%;
            background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
        }
        p.name {
            margin-bottom:65px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <p class="name">John</p>
            <p>XYZ Company</p>
        </div>
    </div>
</body>
</html>

为什么要在第一个例子中下载图像而不是第二个例子？

Answer 1

电子邮件客户端不提供完整的CSS支持。 These tables显示它是一场噩梦......根据他们的说法，Outlook 2000-2003确实支持background-image，但它在Outlook 2007和2010中被删除了。

Answer 2

那是因为创建HTML电子邮件很糟糕。自2007年以来，我认为Outlook从使用Internet Explorer的渲染器转向使用基于Word的HTML渲染器。这使CSS支持非常有限。制作HTML电子邮件而不会失去理智的最大希望是使用表来构建内容并在元素上使用内联样式。是的，为了通过HTML电子邮件覆盖尽可能广泛的受众，您必须像1997年一样编写代码。

Answer 3

Outlook 2007和2010不支持背景图片，因为这些应用中的Web浏览器不是IE。这是Microsoft Word。你必须使用VML来设置背景图像（我知道，我必须这样做）。

这是一个关于VML黑客的页面。

http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/

您还可以在MSNBC订阅时事通讯，看看它们的简报标题（我的手工）是如何完成的。

HTML中的链接图像无法在Outlook 2010中下载

3 个答案: