的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