Html 为什么我的电子邮件在outlook中看起来像s**t？_Html_Email_Outlook_Rendering

Html 为什么我的电子邮件在outlook中看起来像s**t？

html email outlook

Html 为什么我的电子邮件在outlook中看起来像s**t？,html,email,outlook,rendering,Html,Email,Outlook,Rendering,我现在正在写一封电子邮件，主要是基于图片的。如果您使用浏览器打开电子邮件，它看起来不错，但如果使用Outlook打开，则非常糟糕。我听说Outlook使用某种渲染过程。这是真的吗？我可以做些什么来保护我的电子邮件不被破坏看看我的电子邮件：我的电子邮件是否有效：我的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

我现在正在写一封电子邮件，主要是基于图片的。如果您使用浏览器打开电子邮件，它看起来不错，但如果使用Outlook打开，则非常糟糕。我听说Outlook使用某种渲染过程。这是真的吗？我可以做些什么来保护我的电子邮件不被破坏

看看我的电子邮件：

我的电子邮件是否有效：

我的代码：

<!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>


邀请
@字符集“utf-8”；
/*CSS文档*/
.包装纸{
宽度：30%；
左边距：自动；
右边距：自动；
}
斯利姆先生{
背景色：#B63538；
边距：0 0 2px 0；
}
.标志{
保证金：0；
填充：0；
}
.logo img{
宽度：100%；
高度：自动；
}
.文本{
保证金：2px0；
填充：0；
}
.text img{
宽度：100%；
高度：自动；
}
.脸谱网{
保证金：2px0；
}
.facebook img{
宽度：100%；
高度：自动；
}
.联系nav ul{
列表样式：无；
}
.体育{
保证金：2px0；
}
.体育img{
宽度：100%；
高度：自动；
}   
.联系方式{
背景色：#fb9648；
高度：自动；
保证金：2px0；
填充顶部：10px；
}
.联系img{
左：12%；
利润底部：5%；
}
.联系导航{
背景色：#fb9648；
高度：50px；
}
.联系导航ul.bild.联系导航ul.text.联系导航ul{
保证金：0；
显示：内联；
浮动：左；
}
图片报{
宽度：15%；
高度：自动；
}
.联系《图片报》导航img{
宽度：40px；
高度：自动；
}
.联系nav ul.垫片{
宽度：5%；
}
.联系导航ul.文本{
高度：40px；
宽度：30%；
}
@仅介质屏幕和（最小宽度：10cm）和（最大宽度：18cm）
{
.包装纸{
宽度：80%；
}
}
@仅介质屏幕和（最小宽度：1cm）和（最大宽度：10cm）
{
.包装纸{
宽度：100%；
}
.联系img{
宽度：80%；
利润底部：2%；
}   
}

您的一些css可能不受支持。请查看此网站，以获取css支持矩阵，该矩阵可能指向遗漏的内容：

不幸的是，电子邮件的HTML与网页不遵循相同的标准，而且，对旧版MS电子邮件客户端的支持可能与支持旧版IE一样糟糕。请使用CSS重置和模板查看，这对于创建一份看起来不像s**t的时事通讯来说非常理想。

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

参考资料：

您的第二个链接指向的是登录页面，而不是屏幕截图……因为Outlook希望您遭受损失