HTML电子邮件不起作用：/

Miguel 发表于 Dev

米格尔

我的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>

特德·果阿（Ted Goas）

Outlook不支持背景不透明。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。