html - CSS 从 Outlook Online 中的单个 div 元素中剥离

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 的基本要求是，对于每个图像，具有宽度和高度属性，即:

<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">