Question

我正在尝试创建带有嵌入式CSS的简单电子邮件，但是通过电子邮件发送给我的结果与在浏览器中看到的结果完全不同。

这是我的代码：

<html>
   <head>
      <style>
         body {
         background-color: #96D60D;
         }

         div {
         background-color: white;
         border: 1px solid black;
         margin-top: 100px;
         margin-bottom: 100px;
         margin-right: 150px;
         margin-left: 80px;
         padding: 20px;
         }
      </style>
   </head>
   <body>
      <div>
         <center><img src="logo.png"> 
         </center>
         <u>
            <p>
            <H1>API updates list:</H1>
            </p>
         </u>
         <p>
            <b>
         <h2>Successful Entries</h2><br></b>
         <ul>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
         </ul>

         <ul>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
            <li>asdasdasd</li>
         </ul>
         </p>
      </div>
   </body>
</html>

在浏览器中看起来很棒，如您所见：

https://www.w3schools.com/code/tryit.asp?filename=G1EU5RK1DPMG

但是，当放入电子邮件时，它看起来很糟糕：

https://ibb.co/6FVJpZJ

有人知道如何解决这个问题吗？

Answer 1

我猜您正在使用Outlook。它不完全支持某些css属性，而根本不支持其他一些css属性。 Mailchimp的页面很酷，其中包含许多对您有用的信息。只需检查您可以使用哪些属性。根据我的经验，框阴影，边距和边界半径确实使我发疯，因为这些更改无效。

您甚至可以在此找到Outlook的桌面版本和应用版本之间的区别：https://templates.mailchimp.com/resources/email-client-css-support/

简单的电子邮件CSS与在浏览器中显示的有所不同

1 个答案: