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>

在浏览器中显示正常，但前景似乎被边缘混淆。我尝试过使用填充，但这并没有帮助。为了解决这些问题，我需要了解哪些css技巧？ enter image description here

Answer 1

4件事情：

1。）内联样式表。大多数客户会删除样式表或重写它。

2。）使用Tables而不是Divs。表格在客户端更加可靠。

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

4.。）Outlook也无法识别文字阴影

你最好的办法是用你想要的背景颜色建造一个100％宽度的桌子（高度无用，通常最终会破坏布局）。这与为身体指定颜色（不总是支持，但从不伤害添加）相结合，应该为您提供您想要创建的背景。

从那里开始创建另一个包含所需尺寸的桌子。除非使用“Cellpadding”或“Cellspacing”HTML属性，否则Outlook通常会忽略边距和填充。使用这些属性或内联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标签，而是将它们留给您。希望这会有所帮助。

Answer 2

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

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

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

CSS没有在outlook中显示

2 个答案: