Html 无法在电子邮件中正确显示答案

【问题标题】：Html not displaying correctly in emailHtml 无法在电子邮件中正确显示
【发布时间】：2014-06-24 11:41:59
【问题描述】：

HTML：

<div id="container">
    <div id="social-links">
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_03.jpg" alt="">
        www.twitter.com/roadsprep
        <br />
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_09.jpg" alt="">
        www.facebook.com/roadsprep
    </div>
    <div id="website-link">www.roadsprep.com</div>
    <div id="now-at-gurgaon">
        NOW AT
        <BR />
        GURGAON
    </div>
    <div id="gray-box">
        We specialize in
        <br />
        SAT, GRE, GMAT, ACT
        <br />
        IELTS and TOEFL coaching!
    </div>
    <div id="pointers">
        <ul>
            <li>Over 6 years of Test Prep Experience!</li>
            <li>Over 300 students with 2100 + scores</li>
            <li>On average, an improvement of 400 point improvement in scores</li>
        </ul>
    </div>
    <div id="contact-info">
        <strong>Roads Academy Private Limited</strong>
        <br />
        Office No. 4001, Basement, DLF Phase IV, Near, Galleria Market, Gurgaon - 122 009, Haryana
        <br />
        <strong>Phone:</strong>
        +91 85100 66662
        <strong>Email:</strong>
        support@roadsprep.com
    </div>
</div>

CSS：

* {
    font-family: 'Open Sans Condensed', sans-serif;
}
#container {
    background-image: url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg);
    background-repeat: no-repeat;
    width: 600px;
    height: 910px;
    margin: 0 auto;
    padding-top: 31px;
}
#social-links {
    margin: 0 0 0 32px;
    float: left;
    width: 200px;
    height: 57px;
    font-size: 13px;
    font-weight: bold;
}
#website-link {
    margin: 0 21px 0 0;
    float: right;
    width: 200px;
    text-align: right;
    font-size: 22px;
    font-weight: bold;
}
#now-at-gurgaon {
    margin: 230px 0 0 128px;
    color: #454b4f;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    width: 181px;
    line-height: 22px;
    font-family: Arial, Helvetica, sans-serif;
}
#gray-box {
    background-color: #454a4e;
    width: 280px;
    height: 80px;
    border-top: solid 1px #1b1d21;
    margin-top: 315px;
    padding-left: 40px;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    color: #fbc911;
}
#pointers {
    width: 280px;
    padding: 0 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #454a4e;
}
#contact-info {
    border-top: solid 1px #2f3337;
    width: 537px;
    margin: 10px auto 0 auto;
    text-align: center;
    padding-top: 10px;
    line-height: 20px;
    font-size: 17px;
}

网页字体的头部代码：

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

这在浏览器中完美显示，但在电子邮件中不起作用。我知道我不能只是将代码粘贴到电子邮件中，我需要在浏览器中预览它，直接从那里复制，然后将其粘贴到电子邮件正文中，但它无法正确显示。我正在使用 Gmail。

【问题讨论】：

你使用什么服务器端语言？
对于 HTML 电子邮件，最好的办法是使用 tables，（想想 90 年代的网络）和内联样式。 HTML 电子邮件中的 CSS 支持仍然存在一些不足，例如，背景图像在很多电子邮件客户端中不起作用。

标签： html css html-email

【解决方案1】：

电子邮件往往会去除标题内容，因此您不太可能为新字体添加外部链接。

通常，电子邮件中的 html 应尽可能简单，因为它们呈现 html 的能力有限（尤其是 Outlook）。请记住，您将（可能）将其发送给各种电子邮件客户端 - 它们都会略有不同。

这应该会有所帮助：https://www.campaignmonitor.com/css/

【讨论】：

【解决方案2】：

电子邮件的解析/呈现方式与浏览器非常不同。
Outlook 使用 WORD 的渲染引擎！看here
你应该添加你的 css 内联，应该使用表格而不是 div 等。
建立网站有很大不同！ Gmail 的呈现方式与 Outlook 或 Lotus 不同。
我记得，我在所有图像中添加了 style="display:block" 以删除 gmail 中的边距。看here

测试，测试，测试:-)

像 webfonts 这样的东西我会完全删除！

有很多templates可以使用。

还有一些工具可以将你所有的 css 内联。

【讨论】：

关于 Outlook 渲染引擎的要点。使用 Outlook 是一场噩梦。当您知道它基本上只是 Word 时，它确实有助于修复错误。

【解决方案3】：

Float, Padding, Border-Top

不允许使用 CSS 标签

像DIV 这样的标签将无法创建设计，在电子邮件内容中使用Table 基础结构代替div

查看此链接以获取帮助Guid To CSS Implementation in Email content

【讨论】：

@chrisツ我已经更新了我的答案，实际上我想告诉Div结构将无法创建设计，使用表结构
div 给了我问题，使用表格更正了 Outlook 中的格式

【解决方案4】：

大多数电子邮件服务提供商（例如 Yahoo 和 Google）不允许您的 CSS 代码启动。如果您想在电子邮件页面中使用 CSS，您应该将它们更改为内联样式，这样就可以了，因为示例：

<div id="container" style="background-image:url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg); background-repeat:no-repeat; width:600px; height:910px; margin: 0 auto; padding-top: 31px;">blah blah</div>

【讨论】：