我的 email 模板中的 CSS 在 yahoo email 上不起作用

Question

I have built a few email templates the issue is that the CSS is not working on yahoo / outlook / windows native app etc. Pretty much anything that is not mac or google.

I did write the templates using tables but for the CSS I used the style tag because I want the templates to also be responsive.

I will leave some code examples below maybe you can point out my mistake.

 <style type="text/css" data-hse-inline-css="true">
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #ebeff5;
        font-family: 'Source Sans Pro', sans-serif;
      }

      table,
      tr,
      td {
        margin: 0;
        padding: 0;
      }

      table {
        border-spacing: 0;
      }

      img {
        width: 100%;
        border: 0;
      }

      p {
        font-size: 20px;
        color: #39506f;
        line-height: 30px;
      }

      a {
        text-decoration: none;
        cursor: pointer;
      }

      .wrapper {
        width: 100%;
        table-layout: fixed;
        background-color: #ebeff5;
      }

      .main {
        background-color: #ebeff5;
        margin: 0 auto;
        width: 100%;
        max-width: 750px;
        padding: 35px 15px;
      }

      .spacing-one {
        height: 15px;
      }

      .spacing-two {
        height: 25px;
      }

      .card {
        padding: 20px;
        background-color: #ffffff;
        border-radius: 5px;
      }

      .main-font {
        font-size: 30px;
        color: #1b3040;
        font-weight: 400;
      }
...

    <main class="wrapper">
      <table class="main">
        <tr>
          <td class="card">
            <table width="100%">
              <tr>
                <td>
                  <img
                    class="logo"
                    src="path"
                    alt="logo"
                  />
                </td>
              </tr>
              <tr class="spacing-two"></tr>
              <tr>
                <td>
                  <h1 class="main-font">Hey {{name}},</h1>
                </td>
              </tr>
              <tr class="spacing-one"></tr>
              <tr>
                <td>
                  <p>text.</p>
                </td>
              </tr>
              <tr class="spacing-one"></tr>
              <tr>
                <td style="height: 56px">
                  <a href="{{url}}" target="_blank">
                    <span class="main-button"
                      >Reset Password
                      <img
                        class="main-button-icon"
                        src="path"
                        alt=""
                    /></span>
                  </a>
                </td>
              </tr>
              <tr class="spacing-one"></tr>
              <tr>
                <td>
                  <p>
                    text.
                  </p>
                </td>
              </tr>
            </table>

Answer 1

The biggest issue here is that not all email clients support HTML5 semantics (like the <main> tag you're using). And email clients will behave very differently in how they do not support it. You can refer to Can I email for details on support of HTML5 semantics .

For example, Gmail does not support the <main> tag. But it will change it into a <div> element and apply the same class attribute you had in the first place, making this seamless.

Yahoo, however, will remove the <main> element completely, thus also removing the styles you wanted to apply on it.

In your case, changing <main class="wrapper"> into <div class="wrapper"> is enough to make it work in Yahoo.

This might not be enough for Outlook on Windows and Windows native client as both of those use Word as a rendering engine and have very poor support for CSS. Thinks like margin:0 auto or max-width won't work. You will have to rely on conditional comments, tables and eventually mso specific styles to get a proper rendering for Outlook on Windows.