我有一个问题，因为我是相对较新的HTML和CSS领域。我已经创建了一个响应电子邮件页面，并打算通过Outlook发送它。然而，当我将其插入Outlook时，电子邮件看起来扭曲且奇怪，只有一些元素应用了CSS样式。
是我的代码问题还是Outlook本身的问题？我已经复制了纯文本的HTML文件，它在其他电子邮件客户端中显示正确的格式。我不知道为什么Outlook导致这个问题。
我将感谢任何关于如何解决这个问题的见解或建议。我是否应该对代码进行任何特定调整以确保在Outlook中正确呈现？下面是我使用的代码：

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Klessig Immobilien</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@100;200;300&display=swap');
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    
    body {
      font-family: "Ysabeau SC";
      background-color: #1D1A1D;
      font-size: 19px;
      max-width: 800px;
      margin: 0 auto;
      padding: 3%;
    }
    
    img {
      max-width: 100%;
    }
    
    header {
      width: 98%;
    }
    
    #logo {
      max-width: 180px;
      float: left;
    }
    
    #wrapper {
      background-color: #1D1A1D;
    }
    
    #social {
      float: right;
      margin: 3% 2% 4% 3%;
      list-style-type: none;
    }
    
    #social>li {
      display: inline;
    }
    
    #social>li>a>img {
      max-width: 55px;
    }
    
    h1 {
      margin: 3%;
      color: #BFA158;
    }
    
    p {
      margin: 3%;
      color: #ffffff;
      font-family: "century schoolbook";
    }
    
    .btn {
      display: block;
      margin: 0 auto;
      text-align: center;
      font-family: "Arial";
      background-color: #303840;
      color: #f6faff;
      text-decoration: none;
      font-weight: 800;
      padding: 8px 12px;
      border-radius: 8px;
      letter-spacing: 2px;
      max-width: 210px;
    }
    
    hr {
      height: 3px;
      background-color: #BFA158;
      clear: both;
      width: 100%;
      margin-top: 3%;
    }
    
    #contact {
      font-family: "Arial";
      text-align: center;
      text-decoration: none;
      padding-bottom: 3%;
      line-height: 16px;
      font-size: 12px;
      color: #ffffff;
    }
  </style>
</head>

<body style="font-family:'Ysabeau SC';background-color:#1D1A1D;font-size:19px;max-width:800px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;padding-top:3%;padding-bottom:3%;padding-right:3%;padding-left:3%;">
  <div id="wrapper" style="background-color:#1D1A1D;">
    <header style="width:98%;">
      <div id="logo" style="max-width:180px;float:left;">
        <a href="https://www.klessig-immobilien.de/">
          <img src="https://i.imgur.com/fp3w9qx.png" alt="" />
        </a>
      </div>
      <div>
        <ul id="social" style="float:right;margin-top:3%;margin-bottom:4%;margin-right:2%;margin-left:3%;list-style-type:none;">
          <table cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td>
                <a href="https://www.instagram.com/klessigimmobilien/" target="_blank">
                  <img src="https://i.imgur.com/iyMGthV.png" alt="" style="max-width: 70px;" />
                </a>
              </td>
            </tr>
          </table>
        </ul>
      </div>
    </header>
    <div id="banner">
      <img src="https://i.imgur.com/kDgHJPr.png" alt="" style="max-width:100%;" />
    </div>
    <div class="one-col">
      <h1 style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#BFA158;">Klessig Immobilien</h1>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        Hallo,
      </p>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        wir möchten Ihnen gerne unseren neuesten Service vorstellen: virtuelle Besichtigungen mit einem beeindruckenden 3D-Rundgang sowie hochwertige Luftaufnahmen.
      </p>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        Stellen Sie sich vor, Ihre Kunden könnten Ihr Ambiente besichtigen, ohne vor Ort sein zu müssen. Klingt nach Sciencefiction? Mit unserer innovativen Technologie ermöglichen wir genau das!
      </p>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        Die Vorteile sind enorm: Ihre Kunden werden neugierig und interessiert, wenn sie Ihr Gewerbe vorab erleben können, was die Wahrscheinlichkeit erhöht, dass sie sich für einen Besuch/Kauf bei Ihnen entscheiden.
      </p>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        Noch besser: Wir bieten Ihnen eine kostenlose Beratung an, um Ihre individuellen Bedürfnisse zu besprechen und Ihnen zu zeigen, wie virtuelle Besichtigungen Ihres Gewerbes zum Erfolg verhelfen können. Sie können unser Produkt direkt erwerben oder eine
        persönliche Vorstellung anfordern, bei der wir Ihnen gerne weitere Details präsentieren.
      </p>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        Mit freundlichen Grüßen,
      </p>

      <p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
        Ihr Klessig Immobilien Team
      </p>

      <a href="tel:+4917655498237" class="btn" style="display:block;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;text-align:center;font-family:'Arial';background-color:#303840;color:#f6faff;text-decoration:none;font-weight:800;padding-top:8px;padding-bottom:8px;padding-right:12px;padding-left:12px;border-radius:8px;letter-spacing:2px;max-width:210px;">Jetzt Anrufen<br />05541 / 7588288</a>

      <hr style="height:3px;background-color:#BFA158;clear:both;width:100%;margin-top:3%;" />

      <footer>
        <p id="contact" style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;font-family:'Arial';text-align:center;text-decoration:none;padding-bottom:3%;line-height:16px;font-size:12px;color:#ffffff;">
          Klessig Immobilien <br /> Falderbaumstr. 16a <br /> 34123 Kassel <br /> 05541 / 7588288 <br /> info@klessig-immobilien.de
        </p>
      </footer>
    </div>
  </div>
</body>

</html>

我已经尝试过使样式内联，但它不工作

Outlook的解释与其他电子邮件不同，您可以使用此电子邮件的特定条件这里有一个关于堆栈溢出here的示例。
此website列出了您可以在outlook上使用的内容
我用这个website检查你的代码。
CSS中的错误：
提示！不要使用CSS速记语法在电子邮件中使用CSS速记语法可能会在电子邮件客户端之间导致严重的渲染问题。大多数电子邮件客户端不解释速记声明，并将忽略这些属性值。
默认情况下，Outlook.com会将您的电子邮件放在一个名为“ExternalClass”的div中，并使用样式display：inline-block;行高：131%。这些在使用IE时没有影响，但是在其他浏览器中，电子邮件不会居中。
要覆盖这些样式，只需将其包含在电子邮件HTML的嵌入式CSS（）中。
HTML中的错误：
缺少重要的“Content-Type” meta标记版本

3条答案

按热度按时间

e0bqpujr1#

赞(0）回复(0）举报 2023-07-01

7tofc5zh2#

在Outlook中将HTML呈现为电子邮件模板时，重要的是要考虑Outlook的各种版本（例如Outlook for Windows，Outlook for Mac和Outlook on Web）及其对HTML和CSS功能的不同支持级别。
我建议仔细阅读guide，并考虑其关于克服Outlook中呈现挑战的建议。此外，在不同版本的Outlook中测试电子邮件模板，并使用Litmus或Email on Acid等工具，可以帮助您识别和解决任何特定的呈现问题。

egmofgnx3#

对于编码电子邮件，您必须遵循基于表的方法并编写内联CSS。这是最好的办法
首先，你必须给予表格的主结构，然后在表格单元格中，你可以使用div，p，a等。必要时贴标签。在某些情况下，您必须使用嵌套表来给予结构（例如：并排内容）。为此，你不能像电子邮件那样使用显示flex，grid或float。很多在网页上完美工作的东西在电子邮件上不起作用。
即使你学习了几乎所有的电子邮件编码的最佳实践，仍然会有Outlook问题，这是真正具有挑战性的处理。
不幸的是，我没有一个很好的具体建议，把这个html页面变成一个电子邮件友好的html，除了用基于表格的方法重建它。

发送HTML电子邮件与Outlook与css错误

3条答案

相关问题

热门标签

最新问答