html - Outlook 中的 CSS 电子邮件模板无法正确显示

问题描述

我正在尝试制作一个适用于所有电子邮件客户端的 HTML CSS 电子邮件模板。我设法弄了一个简单的。该模板将在 Gmail、Hotmail 上正确显示，但在 Outlook 中，一切都错位了。我知道 Outlook 使用 Words 来呈现模板。我如何编码来解决它。我也想让它响应。我不知道从哪里开始调试。对于为电子邮件客户端编写响应式电子邮件模板，我真的很陌生。我试图内联我的 CSS，但它不起作用。我曾尝试使用石蕊发送电子邮件，但效果不佳。我已将我的代码放在 JSFiddle 中，请高手帮忙。我真的需要一些帮助。

代码

https://jsfiddle.net/hansheung/yjk309e4/2/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
    Margin: 0!important;
    padding: 15px;
    background-color: #FFF;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
}

table {
    border-spacing: 0;
    font-family: sans-serif;
    color: #727f80;
}
.outer-table {
    width: 100%;
    max-width: 670px;
    margin: 0 auto;
    background-color: #FFF;
}
td {
    padding: 0;
}
.header {
    background-color: #C2C1C1;
    border-bottom: 3px solid #FF8800;
}
p {
    Margin:0;
}
.header p {
   text-align: center;
   padding: 1%;
   font-weight: 500;
   font-size: 11px;
   text-transform: uppercase;
}
a {
   color: #F1F1F1;
   text-decoration: none;
}

/*--- Start Two Column Sections --*/
.two-column {
    text-align: center;
    font-size: 0;
    padding: 5px 0 10px 0;
}

img {
   border: 0;
}

/*--- Start Outer Table Banner Image, Text & Button --*/
.image img {
    width: 100%;
    max-width: 670px;
    height: auto;
}
.main-table {
    width: 100%;
    max-width: 610px;
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 6px;  
}
.one-column .inner-td {
   font-size: 16px;
   line-height: 20px;
   text-align: justify;
}
.inner-td {
    padding: 10px;
}


.footer {
    width: 100%;
    margin: 0 auto;
    background-color: #053D66;
    padding: 4% 2%; 
}

/*--- Media Queries --*/
@media screen and (max-width: 400px) {
    .h1 {
        font-size: 22px;
    }
    .two-column .column, .three-column .column {
        max-width: 100%!important;
    }
    .two-column img {
        width: 100%!important; 
    }
}

@media screen and (min-width: 401px) and (max-width: 400px) {

    .two-column .column {
        max-width: 50%!important;
    }
}

.section {
    width: 50%;
    text-align: center;
}
.m1{
    margin: 1%;
}
.p1{
    padding: 2%;
}
.contact-details{
    text-align: left;
}

.text{
    font-family: "Helvetica","sans-serif";
    padding: 50px 0px !important;
    line-height: 150%;
    color:#202020;
    font-size: 18px;
    text-align:inherit
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}

.image-right{
   text-align: right;
   padding-right: 2%;
}


</style>
</head>

   <body>
<div class="wrapper">
    <table class="outer-table">
        <tr>
            <td class="image">
                <img src="http://www.talent-trust.com/documents/News2020.03/covid19-ttc_header.jpg" alt="">
            </td>
        </tr>
    </table><!--End Banner Image-->
    <table class="outer-table">
        <tr>
            <td class="image">
                <img src="http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg" alt="">
            </td>
        </tr>
    </table><!--End Banner Image-->
    <table class="main-table">
        <tr>
            <td class="one-column">
                <table width="100%">
                    <tr>
                        <td class="inner-td">
                            <p class="text"> 
                                As you are aware China has been experiencing an<a href="https://talent-trust.com/documents/News2020.03/en.html"><span style='color:#FF7F30'>Read More</span></a>
                            </p>
                            <!-- <p class="button-holder-center">
                                <a href="" class="btn">Learn More</a>
                            </p> -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr><!--End heading paragraph and button section-->

    </table><!--End of main table-->
    <table class="footer">
        <tbody>
            <tr>
                <td class="section image-right">
                    <img width="35%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">        
                </td>
                <td class="section">
                    <div class="contact-details">
                        <p style="margin-bottom: 0;color:#ffffff;font-size: 11pt; padding-left: 5%;">Email: <a href="mailto:info@talent-trust.com">info@talent-trust.com</a></p>
                        <p style="margin-top: 0;color:#ffffff;font-size: 9pt;padding-left: 5%">Tel:+604-899-8945</p>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="text-right p1"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a></td>
            <td class="text-left p1"><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></td>
            </tr>
        </tbody>
    </table>
</div><!--End Wrapper-->
</body>
</html>

在 GMAIL 中显示 OK

Outlook 中的所有内容都未对齐

标签： htmlcsshtml-emailresponsive

解决方案

如果跨客户端渲染是业务需求（基于您的代码片段），则无法工作或无法工作的事情。

html5
媒体查询
使用类和 ID 绑定样式（所有内容都应内联——使用编程工具或手动编码）
CSS 填充（有限支持）
CSS 边距（有限支持）
段落
最大宽度 CSS 规则

如果您想要跨客户端模板，请遵循这些准则。这些大致来自我的脑海，因为几年前我专业地编写了电子邮件，但我没有一些“硬”测试或链接来支持所有这些。

使用 HTML 4.01 文档类型及其规则。
响应式 (RWD) 电子邮件确实是更高级的东西。在您真正掌握渲染引擎中发生的事情（大量测试）之前，我不建议您这样做。现在坚持使用流体布局，这可以通过这里解释的表格结构来实现。媒体查询也不能跨客户端工作，我会放弃它们。
边距、填充有混合支持，只在td元素上使用它们，如果可以的话，总是加倍使用单元格填充。
避免简短的 CSS 声明。代替border, 使用border-width, border-style, border-color。宽度应始终排在第一位。
不要使用段落（p标签），td通过使用 cellpadding 和 cellspacing 来充分利用 's，这在任何地方都有效。
使用标签上的align和valign属性最容易对齐内容（文本、图像）。td如果使用得当，可以极大地帮助编写任何布局。
您可以使用此 CSS 指南和Can I Email进行快速事实检查，正如 @cloned 所提到的（在我的日子里没有 Can I Email back）。
让自己进入心态：这一年是 1994 年，您可以使用的只有表格（很多）、图像、默认字体和内联 CSS :) 仅此而已。
Firefox 在开发过程中对我很有帮助，因为它的渲染引擎接近 Thunderbird 在屏幕上的输出。
如果您可以潜入一些自定义字体、动画 gif 或有趣的响应行为的正确渲染，那很好，但不要指望它。这绝对不会是跨电子邮件客户端的体验，您工作的客户/经理（如果有的话）应该意识到这一点。这是电子邮件渲染的“渐进式增强” :)
大多数电子邮件客户端会用您的模板做一些可怕的事情，例如将您的代码弄乱到无法识别的程度，添加自定义 id，覆盖类名，添加自己的自定义样式或自定义类，剥离所有头部部分等。它的一部分有与安全有关，另一部分与渲染引擎有关。这就是为什么您大部分时间都应该依赖表格和内联样式，并将内容保持在head您所知道的将在您所定位的程序（电子邮件客户端）中工作的绝对最低限度。

简而言之，这是一个非常深刻的话题，随着您获得测试结果和调整代码的经验，您将获得理解。您应该投资于测试预览软件（您提到了 Litmus）。我在 Acid 上使用过电子邮件，这也很棒。您应该使用它在不同的电子邮件客户端中预览结果，而不是发送您的活动/电子邮件。

最重要的：

如果您要更改代码，请立即对其进行测试（Litmus/Email on Acid）以了解它在每个电子邮件客户端中的呈现方式。这很乏味并且需要时间，但几次之后你就会确切地知道你能做什么，以及结果会是什么。隔离您正在测试的内容，并经常这样做。

第二个最重要的：

定义您的目标电子邮件客户端池。这应该与您的客户/经理（如果有的话）达成协议。您写道，您需要适用于“所有电子邮件客户端”的模板。那是不现实的。他们太多了。

当我编写一个新模板时，我正在测试超过 60 种配置。那是 60 多个屏幕截图来检查每个测试。您需要缩小到“足够好”并且可以合理测试的池。这应该与订阅者列表的统计信息以及通讯订阅者使用的可见电子邮件地址进行检查。

例如：如果 50% 的订阅者使用 Outlook 2007，而其余的订阅者使用 Gmail，那么您知道您需要在这两个客户端中进行定位和测试。其余的只是“奖金”。当然，您并不总是知道这一点，因此您也应该包括最受欢迎的客户。使用 Litmus 或其他人提供的公开统计数据来确定此时什么是“流行的”。

另一件事是，您可能需要也可能不需要在测试中包含与地理区域相关的特定基于 Web 的电子邮件客户端，例如 gmx.de 或 onet.pl 等。它们中的大多数都有自己开发的渲染引擎 -屋。其中一些甚至有适用于他们发送给用户的时事通讯的特殊规则。在这种情况下，您应该能够获得应如何准备时事通讯的书面文档（特殊标签、格式等）。

还要考虑一些比较不起眼的电子邮件客户端，如果有人使用 Kindle 或 Apple Watch 阅读电子邮件怎么办？他们应该看到什么？某些此类客户端使用“纯文本”版本的时事通讯，因此如果无法显示 HTML 版本，或者用户特别阻止了 HTML 并仅请求文本，您还应该准备纯文本版本。

html - Outlook 中的 CSS 电子邮件模板无法正确显示

问题描述

解决方案

推荐阅读