CSS没有加载到电子邮件模板上

时间:2014-03-09 16:14:20

标签: html css email multipart

无论是什么原因,当我尝试发送邮件时,我的css没有正确加载。我的电子邮件背景消失了,电子邮件模板看起来已被删除我尝试使用内联CSS,但这对我来说也没有运气。我试图将我的图像上传到另一台主机,看看是不是这个原因。但毕竟没有运气。

我已将网页模板转换为邮件模板。但仍然没有运气......

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html style="margin: 0; padding: 0;">
<head></head>
<body style="background-image: url('http://s30.postimg.org/3zs80ks9t/image.jpg'); background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-color: #5C5959; width: 100%; font-variant: normal; font-style: normal; padding: 0; font-weight: normal; font-size: 13px; margin: 0 auto; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.8em; text-align: center; letter-spacing: 0.06em;" bgcolor="#5C5959">
<div style="width: 1000px; min-height: 1000px; text-align: center; color: #595959; background-attachment: fixed; background-repeat: no-repeat; margin: 0 auto; padding: 0;" align="center">
<div style="color: white; float: left; margin-left: 55px; margin-top: 40px;"><a href="http://haptotherapiemris.nl" title="Home" style="color: #ffffff; text-decoration: underline;"><img src="http://haptotherapiemris.nl/images/logo.png" border="0"></a></div>      
<div style="color: white;"><div style="color: white;"></div></div>
<div style="color: white; clear: both; height: 50px;"></div>
<div style="color: white; clear: both; text-align: center; width: 1000px; height: 38px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-up.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="center"></div>
<div style="color: white; text-align: center; width: 1000px; margin-top: -2px9; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red.png'); background-repeat: repeat-y; background-color: transparent; background-position: center top;" align="center">
<div style="color: white; text-align: left; width: 760px; height: auto; background-color: transparent; margin: -15px 120px -8px;" align="left">
<h1 style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: 1.5em; font-size: 19px; font-weight: normal; color: #ffffff;">Titel</h1>
<br>content
</div>
</div>
<div style="color: white; text-align: right; width: 1000px; height: 74px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-down.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="right"></div>          
<div style="color: white;">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/HaptotherapieMichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-fb.png"></a>&nbsp;<a target="_blank" rel="nofollow" href="https://twitter.com/#!/Info_MichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-twitter.png"></a>&nbsp;<a target="_blank" rel="nofollow" href="http://blog.haptotherapiemris.nl/" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-blog.png"></a>
</div>
<div style="color: white;"></div>
</div>
</body>
</html>
<html style="margin: 0; padding: 0;">
<head></head>
<body style="background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg.jpg'); background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-color: #5C5959; width: 100%; font-variant: normal; font-style: normal; padding: 0; font-weight: normal; font-size: 13px; margin: 0 auto; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.8em; text-align: center; letter-spacing: 0.06em;" bgcolor="#5C5959">
<style type="text/css">
h1 a:hover { color: #5e5e5e !important; text-decoration: none !important; }
.veolay-menu ul li.menuitem a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; height: 47px !important; }
.menusub ul li.menuitem a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; background: transparent url('http://nieuwsbrief.michaelris.nl/files/images/menubalksub-hover.png') repeat-x center top !important; }
.menusub ul li.menuitemactief a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; background: transparent url('http://nieuwsbrief.michaelris.nl/files/images/menubalksub-hover.png') repeat-x center top !important; }
></style>
<div style="width: 1000px; min-height: 1000px; text-align: center; color: #595959; background-attachment: fixed; background-repeat: no-repeat; margin: 0 auto; padding: 0;" align="center">
<div style="color: white; float: left; margin-left: 55px; margin-top: 40px;"><a href="http://haptotherapiemris.nl" title="Home" style="color: #ffffff; text-decoration: underline;"><img src="http://haptotherapiemris.nl/images/logo.png" border="0"></a></div>      
<div style="color: white;"><div style="color: white;"></div></div>
<div style="color: white; clear: both; height: 50px;"></div>
<div style="color: white; clear: both; text-align: center; width: 1000px; height: 38px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-up.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="center"></div>
<div style="color: white; text-align: center; width: 1000px; margin-top: -2px\9; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red.png'); background-repeat: repeat-y; background-color: transparent; background-position: center top;" align="center">
<div style="color: white; text-align: left; width: 760px; height: auto; background-color: transparent; margin: -15px 120px -8px;" align="left">
<h1 style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: 1.5em; font-size: 19px; font-weight: normal; color: #ffffff;">Titel</h1>
<br>content
</div>
</div>
<div style="color: white; text-align: right; width: 1000px; height: 74px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-down.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="right"></div>          
<div style="color: white;">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/HaptotherapieMichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-fb.png"></a>&nbsp;<a target="_blank" rel="nofollow" href="https://twitter.com/#!/Info_MichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-twitter.png"></a>&nbsp;<a target="_blank" rel="nofollow" href="http://blog.haptotherapiemris.nl/" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-blog.png"></a>
</div>
<div style="color: white;"></div>
</div>
</body>
</html>

3 个答案:

答案 0 :(得分:0)

是HTML简报吗?

如果是这样,那么我很抱歉,但div不是很好支持你必须回到使用表不幸的是:(

答案 1 :(得分:0)

你还有两个打开的html标签 - 这应该只在整个文档中完成一次

答案 2 :(得分:0)

html电子邮件有很多怪癖,check out the link可以帮助您加快速度。

以下是一些问题:

对于背景图像,在所有主要客户中只有2种技术可供使用。 first technique仅适用于整个电子邮件(正文标记),第二个uses VML to support Outlook

对于颜色声明,您必须使用6位十六进制代码,即color:#FFFFFF;而非color:white;,因为不完全支持所有其他颜色代码/名称。

float:left;不完全受支持,您需要在align="left"元素中使用<td>

正如其他答案中所提到的,您应该避免使用<div>,还要避免像<h1>这样的语义标记,因为它们并非在所有客户端中一致地呈现。请改为标注<td><font>标记中的文字。

您的CSS选择器也不起作用。