Question

我的HTML简报出了问题。当您将代码作为Internet网站运行时，一切都很清楚。但是当我在Outlook上导入它时，所有的CSS都不算数。这是正常的吗？感谢＆＃39; S

HTML ＆amp; CSS 此处

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

<强> Outlook doesn't support background opacity

您提供的代码作为一个网站（如您所说），但不幸的是在大多数电子邮件客户端（不仅仅是Outlook）中都会崩溃。电子邮件需要使用<table>来代替<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 that email clients support时将<div>替换为<table>来重建电子邮件，则可以解决Outlook和其他任何地方的显示问题。

HTML电子邮件不起作用：/

1 个答案: