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

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>

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

我的问题：

1. 为什么我的电子邮件中没有包含样式标签？据我所知，Outlook 支持它。参见参考文献here

2. 有什么我可以做的变通或修复吗？我很想在 iPhone 上使用响应式电子邮件，如果我从 Apple Mail 发送它，我知道它可以正常工作。

干杯， 会

Answer 1

如果样式标签没有出现在您的电子邮件代码中，可能是因为它不在头部。不确定 Outlook 是否需要这样做，但这可能是它被剥离的原因。

Answer 2

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

http://htmlemailboilerplate.com/

Answer 3

<style> 标记已从 Gmail 等电子邮件客户端中删除（也许 Outlook 也在这样做？）

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

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

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

Answer 4

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