Простое отображение электронной почты CSS отличается от отображения в браузере - PullRequest
0 голосов
/ 22 февраля 2019

Я пытаюсь создать простое электронное письмо со встроенным 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

Кто-нибудь знает, как это исправить?

1 Ответ

0 голосов
/ 22 февраля 2019

Я полагаю, вы используете Outlook.Некоторые свойства CSS не полностью поддерживаются им, а некоторые другие вообще не поддерживаются.У Mailchimp есть классная страница с большим количеством информации, которую я считаю полезной для вас.Просто проверьте, какие свойства вы можете использовать.Исходя из моего опыта, тени от полей, поля и радиус границы действительно сводили меня с ума, потому что изменения не работают.

Здесь вы даже можете найти различия между версией для настольного компьютера и версией приложения Outlook: https://templates.mailchimp.com/resources/email-client-css-support/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...