电子邮件模板上未加载 CSS答案

【问题标题】：CSS not loaded on email template电子邮件模板上未加载 CSS
【发布时间】：2014-03-09 16:14:20
【问题描述】：

无论是什么原因，当我尝试发送邮件时，我的 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>

【问题讨论】：

您确定您的所有图片都是网络上的公共参考资料吗？所以换句话说，如果我将您的任何图片链接粘贴到我的浏览器中，我将能够看到该图片？
background-image 不受大多数电子邮件客户端的支持。我将使用表和内联 css 手动编写代码，仅使用受支持的 css 语句。
你应该回到古老的编码风格，将时事通讯完全编码在表格中。对于电子邮件模板来说，使用 CSS 是一件很痛苦的事情。

标签： html css email multipart

【解决方案1】：

它是 HTML 时事通讯吗？

如果是这样，那么我很抱歉，但对 div 的支持不是很好，您将不得不返回使用表格不幸:(

【讨论】：

是的，我使用了转换器。

【解决方案2】：

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

【讨论】：

谢谢，所以我必须将所有 div 转换为表格，然后它应该可以工作？
是的，这将是一个好的开始，html 电子邮件是一项非常艰巨的工作——尤其是在 Outlook 中工作。您还只需要一个打开的 html 标记 - 我为它们使用的标记 - zurb.com/ink 希望这会有所帮助！

【解决方案3】：

html 电子邮件有很多怪癖，check out the link 可以让您快速掌握。

这里有几个问题：

对于背景图片，只有两种技术适用于所有主要客户。 first technique 仅适用于整个电子邮件（正文标签），第二个 uses VML to support Outlook。

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

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

正如其他答案中提到的，您应该避免使用<div>，但也应避免使用<h1> 等语义标签，因为它们并非在所有客户端中始终呈现。在 <td> 或 <font> 标签中设置文本样式。

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

【讨论】：