Question

我正在制作一封HTML电子邮件。它在outlook 2003，outlook 2007，hotmail，gmail，yahoo中看起来很好，但在outlook web应用程序中，行之间有间断。有人在outlook web app中遇到过这些问题吗？

我在图像上有显示块，但看起来它们被剥离了。

Answer 1

通过将元素包装在<span style="display:block"></span>

中来解决此问题

E.G：

<a href="http://www.url.com">

  <img src="example.jpg" />

</a>

变为

<a href="http://www.url.com">
 <span style="display:block;">
  <img src="example.jpg" />
 </span>
</a>

但需要对所有破碎的元素进行操作

Answer 2

正在剥离各种样式，因此内联样式将不处理OWA中的图像。

以下是蜥蜴比尔所指的一个简单例子：

<强> <span style="display:block"><img src="myFancyImage.gif"/></span>

如果没有上面的代码，它可能看起来像额外的填充/边距在表和表行/列之间创建空间....基本上是将您带到此页面的问题。

Answer 3

使用此内联css

<span style="margin:0; padding:0; display:block;"><img src="myFancyImage.gif"/></span>

Answer 4

我遇到了同样的问题，遗憾的是这些解决方案都没有奏效。

display：block 总是被条带化，无论我是将图像包裹在span或font标签中。

最终，我发现将图像包裹在具有内联宽度和高度的DIV中解决了这个问题。我想因为DIV已经是块元素了，所以OWA没有剥离的唯一样式是宽度和高度。

e.g。

<td width="475" height="73" valign="top" bgcolor="#e9e9e9">
<div style="display:block;width:475px;height:73px"><img src="../images/email/email_02.jpg" alt="Three Barrels" width="475" height="73" style="display:block;border:none;outline:none;line-height:0;float:left;" /></div>
</td>

Answer 5

我尝试了上面的解决方案并且没有用 - 但这对我有用：

我刚刚在电子邮件代码的顶部添加了此代码。

/* FIX FOR OWA */       
.bdyItmPrt img { display:block !important; }

Outlook Web app中的html电子邮件中断

5 个答案: