2013-10-04 2 views
0

У меня возникли проблемы с вложенной таблицы, содержащей изображение и заголовок, в котором встроенный текст рядом с ней быть перекрыт некоторыми пробелами в Outlook, 2013.Перспективы 2013 HTML электронной почты перекрывающихся текст проблема

экрана здесь: enter image description here

Вот мой код:

<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:[email protected]">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> 
+0

http://stackoverflow.com/questions/15561711/outlook-2013-rendering-issue-nested-table-truncating-adjacent-text?rq=1 – cdunn

+0

попробуйте добавить «mso-table-rspace» влево- aligned-table следующим образом:

ответ

0
  1. Удалить все поля. Outlook dosnt поддерживает его вообще.
  2. Попробуйте сделать display: inline-block и padding-right: 6px на <img>
+0

Спасибо. Очевидно, установка align =" left "в родительскую таблицу исправит эту же проблему: http://stackoverflow.com/questions/15561711/outlook-2013-rendering-issue-nested-table-truncating-adj-text? rq = 1 – cdunn

2

маржа не поддерживается в Outlook. Вместо этого попробуйте использовать прокладку.

Кроме того, объявление ширины и высоты изображения может помочь.

+0

Спасибо, я заменил свои поля заполнением. – cdunn

0

в Я вижу несколько возможных проблем, хотя я никогда не имел отображения перспективы ничего над другим элементом.

1 - На отметке img у вас есть line-height установлен на 50%. Зачем?

2 - У вас есть пустой ТД над изображением, как я полагаю, спейсер. На этом вы должны установить атрибут стиля line-height:4px; font-size:4px;, а затем введите &nbsp; в td. Outlook 2013 сделает ваши пустые ячейки 15px выше в противном случае.

3 - не гнездайте свои span теги. Закройте одну, запустите другую.

4 - Ваше изображение действительно нуждается в display:inline-block;.

+0

Спасибо, это очень полезно. Высота линии: 50%; применяется к изображениям для веб-сайта основанное на клиентах, которое отображало пробелы между изображениями ... Я считаю, что это было специфично для Gmail. – cdunn

+1

@cdunn 'style =" margin: 0; border: 0; заполнение: 0; display: block; "' все, что вам нужно для изображений, чтобы предотвратить пробелы. – John

Смежные вопросы