[英]Outlook 2013 HTML email overlapping text issue
I'm having an issue with a nested table containing an image and caption, where the inline text next to it is being overlapped by some whitespace in Outlook 2013. 我遇到一个包含图像和标题的嵌套表的问题,其中旁边的内嵌文本被Outlook 2013中的某些空白所覆盖。
Screen here: 屏幕在这里:
Here's my code: 这是我的代码:
<td class="post" align="left" style="padding-right:18px;">
<!--<a name="2013310049996"></a>-->
<font style="font-family:Georgia,serif;color:#585555;font-size:22px;font-weight:bold;line-height:25px;display:block;float:left;padding-bottom:12px;"><a href="http://www.modernhealthcare.com/article/20131004/BLOG/310049996?AllowView=VW8xUmo5Q21TcWJOb1gzb0tNN3RLZ0h0MWg5SVgra3NZRzROR3l0WWRMWGFWUDBGRWxyd01qUzMyWmFyNTNnWUpiV24=&utm_source=link-20131004-BLOG-310049996&utm_medium=email&utm_campaign=dose" target="_blank" style="font-family:Georgia,serif;color:#585555;font-size:22px;text-decoration:none;font-weight:bold;line-height:25px;"><span style="font-family:Georgia,serif;color:#585555;font-size:22px;text-decoration:none;font-weight:bold;line-height:25px;">MemorialCare, UC Irvine announce plan to open primary-care centers—with interoperability</span></a></font>
<table width="100%" bgcolor="#ffffff" callpadding="0" cellspacing="0" border="0" valign="top" align="center" style="border-spacing:0;border-collapse:collapse;margin:0;padding:0;background-color:#ffffff;"><tr><td width="100%" height="4"></td></tr></table>
<table width="102" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" valign="top" align="left" style="border-spacing:0;border-collapse:collapse;margin:0;padding:0;background-color:#ffffff;text-align:left;margin-right:12px;">
<tr>
<td valign="top">
<img src="http://www.modernhealthcare.com/apps/pbcsi.dll/storyimage/CH/20131004/BLOG/310049996/AR/0/AR-310049996.jpg?cci_ts=20131004141411&MaxW=90&MaxH=125&border=0" border="0" alt="" style="line-height:50%;margin:0;padding:0;margin-bottom:6px;" />
</td>
<tr>
</table>
<font style="font-family:Arial,Helvetica,sans-serif;color:#7b7a77;font-size:14px;line-height:17px;">
<!-- SUMMARY -->
There has been a lot of complaining lately about the lack of interoperability in healthcare information technology and how the inability of computers to communicate with each other impedes organizing population health-improvement systems. But two Southern California organizations that just announced a deal to open a string of primary-care health centers said interoperability concerns will not stand in the way.
<!-- FULL STORY LINK-->
<br/><a style="font-family:Arial,Helvetica,sans-serif;color:#1f5591;font-size:14px;text-decoration:none;font-weight:bold;line-height:17px;" target="_blank" href="http://www.modernhealthcare.com/article/20131004/BLOG/310049996?AllowView=VW8xUmo5Q21TcWJOb1gzb0tNN3RLZ0h0MWg5SVgra3NZRzROR3l0WWRMWGFWUDBGRWxyd01qUzMyWmFyNTNnWUpiV24=&utm_source=link-20131004-BLOG-310049996&utm_medium=email&utm_campaign=dose&utm_source=link-20131004-BLOG-310049996&utm_medium=email&utm_campaign=dose"><span style="font-family:Arial,Helvetica,sans-serif;color:#1f5591;font-size:14px;text-decoration:none;font-weight:bold;line-height:17px;">FULL STORY <span style="color:#56c7a3;font-size:16px;font-weight:bold;">»</span></span></a>
<!-- BYLINE -->
<br/><span style="font-family:Georgia,serif;color:#858585;font-size:14px;text-decoration:none;font-weight:bold;font-style:italic;line-height:17px;"><a style='font-family:Georgia,serif;color:#858585;font-size:14px;text-decoration:none;font-weight:bold;font-style:italic;line-height:17px;' href="mailto:arobeznieks@modernhealthcare.com">Andis Robeznieks</a><span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;color:#56c7a3;font-size:16px;font-weight:bold;"> »</span></span>
</font>
Margin is not supported in Outlook. Outlook不支持保证金。 Try using padding instead. 尝试改用padding。
Also, declaring the width and height on your image may help. 另外,在图像上声明宽度和高度可能会有所帮助。
display: inline-block
and padding-right: 6px
on the <img>
尝试display: inline-block
padding-right: 6px
display: inline-block
和padding-right: 6px
<img>
上的padding-right: 6px
I see a few potential issues, although I've never had outlook display anything over another element. 我看到了一些潜在的问题,尽管我从未让Outlook在其他元素上显示任何东西。
1 - On the img
tag you have line-height
set to 50%. 1-在img
标签上,将line-height
设置为50%。 Why? 为什么?
2 - You have an empty TD above the image, as a spacer I presume. 2-我假设您在图像上方有一个空的TD,作为一个间隔物。 On that one you should set the style attribute to line-height:4px; font-size:4px;
在那一点上,您应该将样式属性设置为line-height:4px; font-size:4px;
line-height:4px; font-size:4px;
, and throw an
,并抛出
in the td
. 在td
。 Outlook 2013 will make your empty cells 15px high otherwise. 否则,Outlook 2013将使您的空白单元格高15px。
3 - don't nest your span
tags. 3-不要嵌套您的span
标签。 Close one, start the other. 关闭一个,启动另一个。
4 - Your image does indeed need display:inline-block;
4-您的图片确实需要display:inline-block;
. 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.