HTML 电子邮件不起作用：/答案

【问题标题】：HTML email doesn't work :/HTML 电子邮件不起作用：/
【发布时间】：2016-12-14 05:54:38
【问题描述】：

我的 HTML 时事通讯有问题。当您将代码作为 Internet 网站运行时，一切都清楚了。但是当我在 Outlook 上导入它时，所有的 CSS 都不算数。正常吗？谢谢

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>

【问题讨论】：

outlook 不支持外部 css 你应该写所有 css 内联
阅读此w3schools.com/css/css_howto.asp
欢迎来到 HTML 电子邮件的世界。糟透了。没有 JavaScript，嵌套表格而不是 div 和 CSS 定位，一些客户端不支持基本的东西，比如某些元素上的 margin，等等。

标签： html css email outlook newsletter

【解决方案1】：

Outlook doesn't support background opacity.

您提供的代码可用作网站（如您所说），但不幸的是在大多数电子邮件客户端（不仅仅是 Outlook）中会崩溃。电子邮件需要使用<table>s 进行布局，而不是<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 时通过将 <div>s 替换为 <table>s 来重建您的电子邮件，这应该可以解决您在 Outlook 和其他任何地方的显示问题。

【讨论】：