的Html不包括电子邮件正确显示

Question

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

守则头Web字体：

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

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

Answer 1

电子邮件倾向于剥离头内容，所以你不太可能能够增加外部链接的新字体。

作为一项规则，保持HTML电子邮件中尽可能简单，他们的渲染HTML的能力是有限的（尤其是Outlook）中。请记住，您可能（可能）将其发送给各种电子邮件客户端 - 它们都会稍有不同。

这应有助于：https://www.campaignmonitor.com/css/

Answer 2

电子邮件解析/渲染非常不同，因为浏览器做。
Outlook使用来自WORD的渲染引擎！看here
您应该添加你的CSS内联，应使用表而不是DIV等
它的不同建立网站了很多！ Gmail呈现与Outlook或Lotus不同的呈现方式。
我记得，我添加了style =“display：block”给我的所有图片，以删除gmail中的边距。看here

测试，测试，测试:-)

喜欢的东西我网络字体就完全地消除！

有很多的templates就可以使用。

也有一些工具，在那里，它将把所有的CSS内联。

Answer 3

大多数电子邮件服务提供商，如雅虎和谷歌不会让你的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> 

Answer 4

Float, Padding, Border-Top 

CSS标签不alowed

和标签，如DIV将无法​​在信件内容

创造设计，到位 div使用 Table基础结构

看到这个链接寻求帮助Guid To CSS Implementation in Email content