为什么我的电子邮件在 Outlook 中看起来很糟糕？答案

【问题标题】：Why does my email look like s**t in outlook?为什么我的电子邮件在 Outlook 中看起来很糟糕？
【发布时间】：2014-05-21 18:30:32
【问题描述】：

我现在正在处理一封电子邮件，它主要基于图像。如果您使用浏览器打开电子邮件，它看起来不错，但如果使用 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>

【问题讨论】：

您的第二个链接指向登录页面，而不是屏幕截图...
因为 Outlook 想让你受苦

标签： html email outlook rendering

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的某些 css 可能不受支持。查看此站点以获取可能指向被遗漏的内容的 css 支持矩阵：

CSS Support for Outlook

【讨论】：

【解决方案3】：

不幸的是，用于电子邮件的 HTML 并不遵循与网页相同的标准，并且对旧版 MS 电子邮件客户端的支持可能与支持旧版 IE 一样糟糕。查看带有 CSS 重置和模板的 HTML E-mail Boilerplate，该模板非常适合开始看起来不像 s**t 的时事通讯。

【讨论】：