0

我在包含图像和标题的嵌套表中遇到问题，其中旁边的内联文本与 Outlook 2013 中的一些空格重叠。

屏幕在这里： 在此处输入图像描述

这是我的代码：

  <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&#8212;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;">&raquo;</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;">&nbsp;&raquo;</span></span>
    </font>
4

3 回答 3

2

Outlook 不支持边距。尝试改用填充。

此外，在图像上声明宽度和高度可能会有所帮助。

于 2013-10-07T12:46:26.100 回答
1
  1. 删除所有边距。Outlook 根本不支持它。
  2. 尝试做一个display: inline-block和padding-right: 6px<img>
于 2013-10-07T14:23:24.663 回答
0

我看到了一些潜在的问题，尽管我从来没有让 Outlook 在另一个元素上显示任何内容。

1 - 在您设置为 50%的img标签上。line-height为什么？

2 - 你在图像上方有一个空的 TD，我想这是一个间隔。在那个上，您应该将 style 属性设置为line-height:4px; font-size:4px;，并&nbsp;在td. 否则 Outlook 2013 将使您的空单元格高 15 像素。

3 - 不要嵌套你的span标签。关闭一个，启动另一个。

4 - 你的形象确实需要display:inline-block;。

于 2013-10-07T19:12:56.487 回答