Question

我正在处理一封电子邮件，主要是基于图片。如果您使用浏览器打开它，电子邮件看起来很好，但如果使用Outlook打开则非常糟糕。我听说Outlook使用某种渲染过程。真的吗？我该怎么做才能保护我的电子邮件免遭粉碎？

查看我的电子邮件：http://www.s4ea.org/invite.html

我的电子邮件是否有效：https://litmus.com/tests/16706239/versions/1/screenshots

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invitation</title>
<style>

@charset "utf-8";
/* CSS Document */

.wrapper {
    width:30%;
    margin-left:auto;
    margin-right:auto;
}

.slim {
    background-color: #B63538;
    margin:0 0 2px 0;
}

.logo {
    margin:0 0 0 0;
    padding:0 0 0 0;
}

.logo img {
    width: 100%;
    height:auto;
}

.text {
    margin:2px 0 0 0;
    padding:0 0 0 0;
}

.text img {
    width:100%;
    height:auto;
}

.facebook {
    margin:2px 0 0 0;
}

.facebook img {
    width: 100%;
    height:auto;
}

.contact nav ul {
    list-style:none;
}

.sports { 
    margin:2px 0 0 0;
}

.sports img {
    width:100%;
    height:auto;
}   

.contact {
    background-color:#fb9648;
    height:auto;
    margin:2px 0 0 0;
    padding-top:10px;
}

.contact img {
    padding-left:12%;
    margin-bottom:5%;
}

.contact nav {
    background-color: #fb9648;
    height:50px;
}

.contact nav ul .bild, .contact nav ul .text, .contact nav ul .spacer {
    margin:0 0 0 0;
    display:inline;
    float:left;
}

.bild {
    width:15%;
    height:auto;
}

.contact nav ul .bild img {
    width: 40px;
    height:auto;
}

.contact nav ul .spacer {
    width: 5%;
}

.contact nav ul .text {
    height:40px;
    width: 30%;
}

@media only screen and (min-width: 10cm) and (max-width: 18cm)
{

    .wrapper {
        width:80%;
    }



}

@media only screen and (min-width: 1cm) and (max-width: 10cm)

{
    .wrapper {
        width:100%;
    }

    .contact img {
        width:80%;
        margin-bottom: 2%;
    }   

}



</style>
</head>

<body>

<table class="wrapper">
    <tr>
    <td class="slim">&nbsp;

    </td>
    </tr>
</table>
<table class="wrapper">
    <tr>
    <td class="logo">
        <a href="http://www.taste4sports.com" target="_blank">
            <img src="http://www.taste4sports.com/images/logo_email.jpg"  />
        </a>
    </td>
    </tr>
</table>
<table class="wrapper">
    <tr>
    <td class="text">
    <a href="http://www.taste4sports.com" target="_blank">
        <img src="http://www.s4ea.org/images/text4.jpg" />
    </a>
    </td>
    </tr>
</table>
<table class="wrapper">
    <tr>
    <td class="facebook">
    <a href="https://www.facebook.com/SPORTS4ea?ref=ts&fref=ts" target="_blank">
        <img src="http://www.s4ea.org/images/facebook7.jpg" />
    </a>
    </td>
    </tr>
</table>
<table class="wrapper">
    <tr>
    <td class="sports">
        <a href="http://www.s4ea.org" target="_blank">
            <img src="http://www.taste4sports.com/images/support.jpg" />
        </a>
    </td>
    </tr>
</table>
<table class="wrapper">
    <tr>
    <td class="contact">
        <img src="http://www.taste4sports.com/images/contact/phone.jpg" />
        <img src="http://www.taste4sports.com/images/contact/fax.jpg" />
            <a href="http://www.taste4sports.com" target="_blank">
                <img src="http://www.s4ea.org/images/internet_back2.jpg" />
            </a>
        <a href="mailto:clara@s4ea.org">
            <img src="http://www.s4ea.org/images/@.jpg" />
        </a>
    </td>
    </tr>
</table>


</body>
</html>

Answer 1

您的部分内容可能不受支持。看看这个网站上的css支持矩阵可能会指出遗漏的东西：

CSS Support for Outlook

Answer 2

不幸的是，电子邮件的HTML并不遵循与网页相同的标准，对旧版MS电子邮件客户端的支持可能与支持旧版本的IE一样糟糕。使用CSS重置和模板查看HTML E-mail Boilerplate，这对于创建一个看起来不像的简报来说非常理想。

Answer 3

MS Outlook使用Microsoft Word呈现HTML电子邮件。不幸的是，对稀疏格式化的支持可能很粗略，具体取决于订阅者使用的Outlook版本。首先，确定您最重要的客户使用的是什么（如果您使用MailChimp或其他服务，它可以告诉您人口统计数据）...这将让您了解支持哪些类型的CSS功能。

参考：http://kb.mailchimp.com/campaigns/previews-and-tests/my-campaign-looks-bad-in-outlook

为什么我的电子邮件在Outlook中看起来像？

3 个答案: