在线Outlook中从单个div元素中剥离了CSS

Question

我正在尝试创建在Outlook和gmail的在线版本中均正确可见的电子邮件。我似乎在gmail中可以正常使用，但是在Outlook中遇到了一个奇怪的问题。我有两个相同的元素，里面有一个图像。当我在Outlook中查看第一个元素时，它将剥离内联样式属性的整个元素。然后，使用相同的代码在第二个上就可以正常工作。 （请参见屏幕截图）我知道电子邮件客户端之间存在奇怪的不一致之处，但是我不确定这里发生了什么。如果有人有任何想法，请告诉我。

我环顾四周，唯一一个似乎与我有类似问题的人是this question，但我至少没有发现任何像这样的流浪分号。

<table>
  <td align="left">
    <div id="wrapper" style="width: 600px;background-image: linear-gradient(#15dbff, #6aff90);margin-top: 0px;position: absolute;top: 0px;">
      <table height="20px" width="600px">
        <tr height="20px" width="600px"></tr>
      </table>
      <div id="heading" style="width: 452px;height: 131px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;">
        <img id="headerimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 131px; margin-left: 150px;">
      </div>
      <div id="body" style="width: 392px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;padding: 30px;">
        <p id="greeting">Mr. Somebody,</p>
        <p id="mainbody">This is some sample text. It should be using the Montserrat font family. <a href="#" style="text-decoration: none;background: linear-gradient(to right, #15dbff, #6aff90);background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: #001744;">This</a>          is what a link should look like. Any images should be inside a div like this.
          <div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
          <div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
        </p>
        <p id="signature">Thanks,<br>Kevin Long</p>
      </div>
      <div id="contact" style="width: 452px;background-color: white;margin: auto;margin-top: 20px;margin-bottom: 20px;border-radius: 25px;">
        <table>
          <th style="width: 50%;"> <img id="contactimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 120px;"></th>
          <th style="width: 50%;"><a href="https://kevinuulong.com" style="text-decoration: none;background: linear-gradient(to right, #15dbff, #6aff90);background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: #001744;">kevinuulong.com</a><br><br>
            <a
              id="btn" href="mailto:someone@example.com" style="text-decoration: none;background: #5284ff;background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: white;padding-left: 50px;padding-right: 50px;padding-top: 10px;padding-bottom: 10px;border-radius: 20px;">Contact Me</a>
          </th>
        </table>
      </div>
      <table height="20px" width="600px">
        <tr height="20px" width="600px"></tr>
      </table>
    </div>
  </td>
</table>

Answer 1

Outlook的基本要求是每个图像都具有width和height属性，即：

<img width="392" height="200" src="https://source.unsplash.com/random/?colors/392x200">

Div在Outlook中往往表现不佳；这就是为什么我们仍然使用表格进行布局的原因。

如果您需要图像进行响应，请以以下样式添加该图像：

<img width="392" height="200" style="width:100%;height:auto;max-width:392px" src="https://source.unsplash.com/random/?colors/392x200">