CSS 未在 Outlook 中显示

Question

我有一个电子邮件模板：

<html>
    <head>
        <style>
            #outer_content {
                background-color: #F7F7F7;
                border: 1px solid #E4E4E4;
                width: 100%;
                height: 100%;
            }

            #email_content {
                max-width: 650px;
                font: 12px Georgia, "Times New Roman", Times, serif;
                color: #888;
                text-shadow: 1px 1px 1px #FFF;
                margin-left: 25px;
                margin-top: 15px;
                margin-right: 25px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="outer_content">
            <div id="email_content">
                <h2>New message from {{ user }} ( {{ email }} )</h2>
                <p>Message below:</p>
                <p>{{ message }}</p>
            </div>
        </div>
    </body>
</html>

它在浏览器中显示良好，但 Outlook 似乎被边缘混淆了。我试过使用填充，但这没有帮助。为了解决这些问题，我需要知道任何 css 技巧吗？

Answer 1

4 件事立即生效：

1.) 内联您的样式表。大多数客户端要么删除样式表，要么重写它。

2.) 使用表格而不是 Div。表在客户端之间更加可靠。

3.) 几乎所有的电子邮件客户端都会完全忽略最大宽度。要使用 Outlook 解决此问题，请创建一个定义了 650 宽度表的条件语句 ( ) 或使用媒体查询并使其成为响应式。

4.) Outlook 也无法识别文本阴影

你最好的办法是用你想要的背景颜色构建一个 100% 宽度的表格（高度是无用的，而且通常最终会破坏布局）。这与将颜色分配给主体（并非总是支持，但添加不会造成伤害）相结合，应该为您提供想要创建的背景。

从那里只需在里面创建另一个具有您想要的尺寸的表格。Outlook 通常会忽略边距和填充，除非使用“Cellpadding”或“Cellspacing”HTML 属性。使用这些属性或内联 CSS 是您最好的选择。

我将 CSS 分开，因为单独声明有助于支持。还添加了一些很好的样式以包含跨客户端支持，并使其响应媒体查询。

示例代码：

<html>
<head>

<style type="text/css">

/* Client-specific Styles and Fixes */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; line-height: 100% !important;}

    /*TABLET STYLES*/
@media only screen and (max-width: 479px) {
    table[class=Responsive] {width: 100% !important;}
}
    /*MOBILE STYLES*/
@media only screen and (max-width: 479px) {
    table[class=Responsive] {width: 100% !important;}
}
    </style>
</head>
<body yahoo="fix" bgcolor="#F7F7F7" width="100%" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center" style="border-width:1px; border-style:solid; border-color:#E4E4E4;">
<tr>
<td align="center">
<table width="650" class="Responsive" cellpadding="15" cellspacing="0" border="0" style="font-family:Georgia, Times New Roman, Times, Serif; font-size:12px; color:#888888;">
<tr>
<td align="center" style="font-family:Georgia, Times New Roman, Times, Serif; font-size:12px; color:#888888;"><h2>New message from {{ user }} ( {{ email }} )</h2>
 <p>Message below:</p>
 <p>{{ message }}</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

我个人不使用标题标签，甚至不使用真正的 P 标签，而是将它们留给你。希望这可以帮助。