HTML 电子邮件不起作用：/

Question

我的 HTML 通讯有问题。当你运行把代码当成互联网网站，一切就都清楚了。但是当我在 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>

Answer 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 和其他任何地方的显示问题。

HTML 电子邮件不起作用：/

HTML email doesn't work :/

html

css

email

outlook

newsletter