CSS 未在 Outlook 中显示答案

【问题标题】：CSS not showing in outlookCSS 未在 Outlook 中显示
【发布时间】：2014-11-06 09:45:22
【问题描述】：

我有一个电子邮件模板：

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

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

【问题讨论】：

标签： html css outlook html-email

【解决方案1】：

立即做 4 件事：

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

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

3.) 几乎所有电子邮件客户端都会完全忽略 Max-Width。要使用 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 标签，而是将它们留给你。希望这会有所帮助。

【讨论】：

【解决方案2】：

这很疯狂，但 Outlook 不支持 CSS 中的“高度”标签。请看https://www.campaignmonitor.com/css/

您必须使用带有 div html 属性的“height”标签，如下所示：

<div id="outer_content" height="100%">

【讨论】：