Question

我遇到了为Outlook创建HTML签名电子邮件的问题。

签名前我有一个样式标记，并为响应式电子邮件添加媒体宽度。

<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }

table {
min-width:650px;
}

@media only screen and (max-device-width: 480px) {
td[class=hidden-phone] {
    width: 0px !important;
    display: none !important;
    overflow: hidden !important;
    float: left !important;
}
td[class=description] {
    width: 100% !important;
}

td[class=visible-phone] {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    float:none !important;
}
table {
    min-width: auto !important;
}
}
</style>

<table width="100%" style="font-family:'arial';">
<tr>
<td colspan="4" width="100%" style="height:10px;border-bottom:2px solid #96999e;height:0px;">&nbsp;</td>
</tr>
<tr>
<td style="padding:10px;width:80px;min-width:80px;"><img src="http://urbanangles.com/fileserver/gallery/[[ID]]_original.png" /></td>
<td class="description" valign="bottom" style="padding:10px 0 10px 10px;width:170px;color:#111;min-width:170px;line-height:11px;">
    <span style="font-size:11px"><strong>[[NAME]]</strong></span><br/>
    <span style="font-size:11px;color:#007dc3;">[[TITLE]]</span><div style="margin-bottom:5px;"></div>
    <span style="font-size:9px;">A Studio</span><br/>
    <span style="font-size:9px;">10 Somewhere St, Suburb, STA&nbsp;1234</span><br/>
    <span style="font-size:9px;margin-right:10px;">D&nbsp;&nbsp;</span><span style="font-size:9px;">[[DIRECT]]</span><br/>
    <span style="font-size:9px;margin-right:10px;">P&nbsp;&nbsp;</span><span style="font-size:9px;">[[PHONE]]</span><br/>
    <span style="font-size:9px;margin-right:9px;">M&nbsp;&nbsp;</span><span style="font-size:9px;">[[MOBILE]]</span><br/>
    <span style="font-size:9px;margin-right:10px;">E&nbsp;&nbsp;</span><span style="font-size:9px;"><a href="mailto:[[EMAIL]]" style="color:#111;text-decoration:none;">[[EMAIL]]</a></span><div style="margin-bottom:5px;height:0px;"></div>
    <span style="font-size:11px"><strong><a style="color:#111;text-decoration:none;" href="http://www.examples.com">www.examples.com</a></strong></span><br/>
</td>
<td class="hidden-phone" style="width:100%;"></td>
<td class="hidden-phone" valign="bottom" style="padding:10px 10px 10px 0;width:360px;min-width:360px;"><span style="margin-right:15px;"><a href="http://www.facebook.com/urbanangles" style="margin-right:3px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a>&nbsp;<a href="http://www.twitter.com/urban_angles"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span>&nbsp;&nbsp;<a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo.jpg" /></a>    </td>
 </tr>
 <!--[if !mso 9]><!-->
 <tr>
<td colspan="1" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left">
    <span style="margin-left:10px;margin-right:25px;">
    <a href="http://www.facebook.com/examples" style="margin-right:5px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a>
    <a href="http://www.twitter.com/examples"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span>
</td>
<td colspan="3" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left">
    <a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo" style="width:80%;margin-left:8px;" /></a>
</td>
</tr>
<!--<![endif]-->
<tr><td colspan="4" width="100%" style="height:10px;border-top:2px solid #96999e;"></td>   </tr>
</table>

<p  style="font-size:11px;font-family:'arial';margin:0 0 5px 0;padding:0"><i>Please consider the environment before printing this email.</i></p>

<p style="font-size:9px;font-family:'arial';color:#999;margin:0 0 5px 0;padding:0">This email and any attachment(s) is intended only for the exclusive and confidential use of the addressee(s). If you are not the intended recipient, any use, interference with, disclosure or copying of this material is unauthorised and prohibited. If you have received this message in error, please notify the sender by return email immediately and delete the message from your computer without making any copies. [[COMPANY]] does not guarantee the integrity of any emails or attached files.</p>

我在苹果邮件上一切正常。但是，我的HTML看起来并不满意。来自outlook的所有电子邮件都没有样式标签，这使得我的html在iphone上看起来很奇怪。

我的问题：

为什么我的电子邮件中不包含样式标记？据我所知，它在outlook中受到支持。请参阅参考here
我可以做任何工作或修复吗？我希望在iPhone上有响应式电子邮件工作，如果我从Apple Mail发送它，我知道它有效。

干杯，将

Answer 1

如果样式标记未显示在电子邮件的代码中，则可能是因为它不在头部。不确定Outlook是否需要这样做，但这可能就是它被剥离的原因。

Answer 2

从某些电子邮件客户端（例如Gmail）中删除了<style>标记（也许Outlook也在这样做？）

相反，您应该使用内嵌样式。

在您引用的同一网站上，使用样式的指南：http://www.campaignmonitor.com/resources/will-it-work/guidelines/

您可以使用http://premailer.dialect.ca/将您的签名转换为内联样式，并且免费：）

Answer 3

您应该查看HTML电子邮件样板。

http://htmlemailboilerplate.com/

Answer 4

您应始终为HTML电子邮件使用内嵌样式，因为这样可以最大程度地兼容不同的客户端。我知道它不如单独的CSS块好，但就是这样。

Outlook 2010不包含签名中的样式标记

4 个答案: