CSS沒有顯示在Outlook

我有一個電子郵件模板：CSS沒有顯示在Outlook

<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

來源

2014-11-06 Jon

4件事情蝙蝠：

1）內聯樣式表。大多數客戶將刪除樣式表或重寫它。

2.）使用Tables not Divs。客戶表中的表格更可靠。

3.）幾乎所有的電子郵件客戶端都會完全忽略最大寬度。要使用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標籤，而是留在了你。希望這可以幫助。

來源

2014-11-06 16:25:19 Gortonington

這幫了很多，謝謝:) – Jon 2014-11-17 13:14:37

這很瘋狂，但Outlook不支持CSS中的「height」標籤。請看看https://www.campaignmonitor.com/css/

您必須使用「高度」與DIV HTML標籤屬性是這樣的：右

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

來源

2014-11-06 10:24:11 slieu

CSS沒有顯示在Outlook

回答

相關問題