HTML电子邮件Office 365（OWA）表呈现错误

Question

我正在创建一个由切片图像组成的电子邮件签名。以下是图像应如何组合在一起：

以下是代码：

<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td colspan="4" height="82">
      <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td>
  </tr>
  <tr>
    <td rowspan="2" height="54">
      <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td>
    <td height="40">
      <a href="#"><img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td>
    <td height="40">
      <a href="#"><img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td>
    <td rowspan="2" height="54">
      <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td>
  </tr>
  <tr>
    <td colspan="2" height="14" style="line-height: 14px;">
      <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td>
  </tr>
</table>

除了Office365（在任何浏览器中）之外，几乎所有邮件客户端都能完美呈现。查看所有客户端/浏览器https://www.emailonacid.com/app/acidtest/viewresult/tUjH3Kk7JSzaD5D0F6X2agbPFHRkUvVfkGetyDv2hMgll的屏幕截图。下面的屏幕截图显示了IE11中的Office365。

我似乎无法修复此空白问题，也无法修复链接图像周围的轮廓。我已经尝试了这里列出的两个修复程序http://www.emailonacid.com/blog/details/C13/two_fixes_for_image_spacing_in_outlook_web_app_owa，但它们都没有工作。 align="left"已将其固定在Office365中的Chrome和Firefox中，但在其他浏览器中仍然存在损坏，而且它在许多其他客户端中打破了布局。这是div修复的类似故事。查看左对齐的所有客户端/浏览器的屏幕截图＆＃39;修复＆＃39;这里https://www.emailonacid.com/app/acidtest/viewresult/SyapFGGm5JKUgTdZEs6L7oqlmHLOuQqMcFQGM307uA7LH

有没有人知道如何解决此问题而不会导致其他客户端/浏览器出现问题？

非常感谢

Answer 1

使用图片时，您还需要使用align =规则删除owa中的空格

这是一个巨大的痛苦

<img src="img/Rectangle_2.png" width="25" height="54" alt="" align="center" style="display: block;">

如果它只是纯色，你应该坚持表格的背景颜色

Answer 2

我能够复制你的问题。要修复它，请删除代码中的所有硬回车;它看起来像签名html编辑器添加了多个不间断的空格（ ），导致图像对齐问题。注意所有代码如何出现在下面的一行中;它会在html编辑器中根据需要进行换行。

<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td colspan="4" height="82"> <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td></tr><tr> <td rowspan="2" height="54"> <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td><td height="40"> <a href="#"><img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td><td height="40"> <a href="#"><img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td><td rowspan="2" height="54"> <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td></tr><tr> <td colspan="2" height="14" style="line-height: 14px;"> <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td></tr></table>

另一件事 - 超链接的图像（<a>标签内）需要将border属性设置为零，而不是通过内联CSS设置它。

<a href=""><img src="" width="" alt="" border="0" style="display:block;"/>