HTML電子郵件不起作用：/

我的HTML通訊出現問題。當您將代碼作爲Internet網站運行時，一切都很清晰。但是，當我在Outlook上導入它時，所有的CSS都不算。這是正常的嗎？感謝的HTML電子郵件不起作用：/

HTML & CSS這裏


 

 
    <style> 
 
     body { 
 
      max-width: 600px; 
 
      background-color: rgb(67, 153, 186); 
 
     } 
 
     
 
     h1 { 
 
      color: rgb(214, 196, 0); 
 
     } 
 
     
 
     h2 { 
 
      font-weight: bold; 
 
     } 
 
     
 
     * { 
 
      font-family: "Univers LT 45", sans-serif; 
 
     } 
 
     
 
     p { 
 
      background-color: rgba(255, 255, 255, 0.2) 
 
     } 
 
     
 
     #NewsletterPRONA { 
 
      flex-direction: column; 
 
      rgb(67, 153, 186); 
 
     } 
 
     
 
     #news {} 
 
     
 
     #yellow { 
 
      background-color: rgb(214, 196, 0); 
 
      width: 100%; 
 
      margin-bottom: auto; 
 
      overflow: hidden; 
 
     } 
 
     
 
     #yellowL { 
 
      float: left; 
 
      width: 50%; 
 
     } 
 
     
 
     #yellowR { 
 
      position: relative; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #h1v2 { 
 
      color: rgb(67, 153, 186); 
 
      background-color: rgb(214, 196, 0); 
 
     } 
 
     
 
     #personnel { 
 
      flex-direction: column; 
 
     } 
 
     
 
     #qsum { 
 
      background-color: rgb(214, 196, 0); 
 
      overflow: hidden; 
 
     } 
 
     
 
     #divers { 
 
      overflow: hidden; 
 
     } 
 
    </style>


 

 
<body id="NewsletterPRONA"> 
 
    <div id="blue" style="background-color:rgb(67, 153, 186);"> 
 
    <div id="news"> 
 
     <h1>News</h1> 
 
     <p></p> 
 
    </div> 
 
    <div id="yellow"> 
 
     <h1 id="h1v2">Geschäftsverlauf/Déroulement des affaires</h1> 
 
     <div id="yellowL"> 
 
      <h1 id="h1v2">Offerten</h1> 
 
      <p> 
 

 
      </p> 
 
      <h1 id="h1v2">Projekte</h1> 
 
      <p> 
 

 
      </p> 
 
     </div> 
 
     <div id="yellowR"> 
 
      <h1 id="h1v2">Offres</h1> 
 
      <h2>Bruit</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>Sols</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>Déchets</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>EIE</h2> 
 
      <p> 
 

 
      </p> 
 
      <h2>Physique et acoustique du bâtiment</h2> 
 
      <p> 
 

 
      </p> 
 
      <h1 id="h1v2">Projets</h1> 
 
      <h2>Bruit</h2> 
 
      <p> 
 

 
      </p> 
 
     </div> 
 
    </div> 
 
    <div id="personnel"> 
 
     <h1>Personal/Personnel</h1> 
 
     <h2>Neueinstellungen/Nouveaux engagements</h2> 
 
     <p></p> 
 
     <h2>Austritte/Départs</h2> 
 
     <p></p> 
 
     <h2>Jubiläum/Jubilé</h2> 
 
     <p></p> 
 
     <h2>Geburtstage/Anniversaires</h2> 
 
     <p></p> 
 
    </div> 
 
    <div id="qsum"> 
 
     <h1 style="color: rgb(67, 153, 186);">QSUM/MQSE</h1> 
 
     <div id="yellowL"> 
 
      <p></p> 
 
     </div> 
 
     <div id="yellowR"> 
 
      <p></p> 
 
     </div> 
 
    </div> 
 
    <div id="divers"> 
 
     <h1>Diverses/Divers</h1> 
 
     <div id="yellowL"> 
 
      <p></p> 
 
     </div> 
 
     <div id="yellowR"> 
 
      <p></p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

來源

2016-08-08 Miguel

outlook不支持外部css你應該寫所有的css內聯 –

你是怎麼做到的？ – Miguel

閱讀此http://www.w3schools.com/css/css_howto.asp –

Outlook doesn't support background opacity。

您提供的代碼可以像網站一樣工作（如您所說），但不幸的是會在大多數電子郵件客戶端（而不僅僅是Outlook）中崩潰。電子郵件需要使用<table>來代替<div> s。 Flexbox也不適用於電子郵件。

電子郵件代碼看起來更像是這樣的：

<table cellpadding="0" cellspacing="0" border="0" align="center"> 
    <tr> 
    <td valign="top" style="vertical-align: top;background: #aaaaaa;"> 
     <span style="color: #333333;">text</span> 
    </td> 
    </tr> 
</table> 
<table cellpadding="0" cellspacing="0" border="0" align="center"> 
    <tr> 
    <td valign="top" style="vertical-align: top;"> 
     <img src="full path to image" alt="alt text" width="50" height="50"> 
    </td> 
    </tr> 
</table>

如果您在使用CSS that email clients support重建與<table>小號取代<div>是你的電子郵件，這應該解決您的顯示問題在Outlook和其他地方。

來源

2016-08-08 18:18:52

HTML電子郵件不起作用：/

回答

相關問題