0

当我在电子邮件中包含以下 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>

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

4

3 回答 3

2

电子邮件客户端不提供完整的 CSS 支持。这些表格表明这是一场噩梦……据他们说，Outlook 2000-2003 确实支持background-image，但在 Outlook 2007 和 2010 中被删除了。

于 2012-04-05T16:30:42.337 回答
0

That's because creating HTML emails suck. Outlook, since 2007 I believe, switched from using Internet Explorer's renderer to using a Word based HTML renderer. This makes CSS support extremely limited. Your best hope at making an HTML email without losing your mind is to use tables to structure your content and use inline styles right on the elements. Yes, to reach the widest possible audience with HTML emails you have to code like it's 1997.

于 2012-04-05T16:34:04.720 回答
0

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

这是一个关于 VML hack 的页面。

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

您还可以订阅 MSNBC 的时事通讯，并在他们的时事通讯标题中查看它是如何完成的（我的杰作）。

于 2012-06-05T20:16:39.820 回答