html - 电子邮件模板上未加载 CSS

标签 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>

最佳答案

它是 HTML 简报吗?

如果是这样,那么很抱歉,div 没有得到很好的支持,不幸的是,您将不得不重新使用表格 :(

关于html - 电子邮件模板上未加载 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22284622/

相关文章:

javascript - 在每个月初重置计数器

php - php表格中行的颜色

带有附件问题的 php outlook 日历事件

PHP:file_get_contents 中的文件名不能为空

html - 如何正确使用线性渐变?

html - 如何在显示另一个溢出时隐藏主要 HTML 溢出?

css - 垂直居中元素

css - 我如何以不同方式设置两个相同类 div 的样式?

email - 为什么我的服务器发送的电子邮件被标记为垃圾邮件?

html - :active being ignored by IE