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

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

Я пробовал:

Стилизация классов p.mso в тегах стиля Вложение моих изображений в div и установка их по высоте изображения. высота строки: 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>

Кто-нибудь знает исправление? Я уже устал рыскать по интернету в поисках одного. Спасибо.


padding email html-email outlook.com
person Chuck    schedule 21.11.2014    source источник
comment
мы можем увидеть кусок вашего html, где это происходит?   -  person zazzyzeph    schedule 21.11.2014
comment
Я добавил html выше, надеюсь, это поможет. Спасибо!   -  person Chuck    schedule 21.11.2014

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person vankoot.com    schedule 10.12.2014

arrow_upward
0
arrow_downward

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

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

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

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

person zazzyzeph    schedule 21.11.2014