Пробел при просмотре электронной почты HTML на Outlook.com

Я создаю html-адрес электронной почты, сплайсируя одобренный дизайн в Photoshop и кодируя его вручную. Электронная почта отлично выглядит как в Outlook, так и в Gmail, но не в outlook.com.Пробел при просмотре электронной почты HTML на Outlook.com

Я пробовал:

Стилизация классы p.mso в тегах стиле Гнездование мои изображения в дивы и установка их высоты изображения. длина линии: 50%; на все. (снял это, а остальные два почтовых клиента отлично отобразили) , делая теги td одинаковой высоты по сравнению с изображениями.

Ничего не работает, я получаю дно на всех моих изображениях, разрушая макет.

HTML, выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>this is placeholder</title> 
</head> 
<body bgcolor="#eee" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0; top:0;"> 
<style type="text/css"> 
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 
    p.ecxMsoNormal, .ecxMsoNormal { line-height:0px; margin:0px; padding: 0px; display: none; } 
</style> 
<center> 
    <table id="Table_01" style="display:block; background-color: #fff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600" border="0" cellpadding="0" cellspacing="0" col="3"> 
     <tr> 
      <td valign="top" align="left" width="600" colspan="3" style="padding: 0px; margin: 0px; line-height: 50%;"> 
       <img src="images/email_01.png" alt="" width="600"/> 
      </td> 
     </tr> 
     <tr> 
      <td valign="top" align="left" width="29" colspan="1" style="padding: 0px; margin: 0px; line-height: 50%;"> 
       <img src="images/email_02.png" alt="" width="29"/> 
      </td> 
      <td valign="top" align="left" width="542" colspan="1" style="background-color: #f3f3f4; padding: 0px; margin: 0px; line-height: 50%;" height="172"> 
       <img src="images/email_03.png" alt="" align="right" width="133" height="172"/> 
       <p style="font-family: 'Arial', 'Helvetica', sans-serif; text-align:left; font-size:14px; line-height:21px; background-color:#f3f3f4; color: #6d6e71;padding: 0px; margin: 0px; width: 409px; height:172px;"> 
        We are delighted to attach the inaugural <span style="color: #004281; font-weight:bold; font-size:16px;">this is placeholder</span><br/>this is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholder 
        <br/><br/> 
        <span style="color: #f6861f; font-weight:bold; font-size: 18px;">this is placeholder</span> 
       </p> 
      </td> 
      <td valign="top" align="left" width="29" colspan="1" style="padding: 0px; margin: 0px; line-height: 50%;"> 
       <img src="images/email_04.png" alt="" width="29"/> 
      </td> 
     </tr> 
     <tr> 
      <td valign="top" align="left" width="600" colspan="3" style="padding: 0px; margin: 0px; line-height: 50%;"> 
       <img src="images/email_05.png" alt="" width="600"/> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Кто-нибудь знает исправить? Я устал травить в Интернете за это. Благодарю.

источник

2014-11-21 Chuck

мы можем видеть часть вашего HTML, где это происходит? – zazzyzeph

Я добавил html выше, надеюсь, что это поможет. Благодаря! – Chuck

Попробуйте добавить style="display:block;" к тегам изображения.

Возможно, это также связано с line-height:50%; у вас есть на TD, поскольку Outlook.com имеет довольно ужасные правила высоты строки.

http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

^Они оставляют это, но для линии высоты затруднительного работать, вы должны обернуть содержание в <div class="ExternalClass">

источник

2014-11-21 19:39:40 zazzyzeph

Попробуйте добавить line-height:0; к вашему р и/или классов пролетных он решил его для меня.

span {padding:0;margin:0;line-height:0;} p {padding:0;margin:0;line-height:0;}

источник

2014-12-10 14:24:59

Пробел при просмотре электронной почты HTML на Outlook.com

ответ

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