Белый пробел появляется в шаблоне электронной почты в Outlook 2010 - PullRequest
0 голосов
/ 30 августа 2018

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

Отлично выглядит на большинстве веб-клиентов, настольных клиентов (Thunderbird и Mail [Apple]), но в Outlook появляется белый пробел.

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

Вот кодовая ручка для проверки исходного кода: https://codepen.io/anon/pen/wEoxKy

<div class="col num6" style="max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;background-color:#000000;">
            <div style="background-color: #000000; width: 100% !important;"><!--[if (!mso)&(!IE)]><!-->
            <div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 5px;"><!--<![endif]-->
            <div align="center" class="img-container center  autowidth  fullwidth " style="padding-right: 0px;  padding-left: 0px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0.5px;" align="center"><![endif]--><img align="center" alt="Image" class="center  autowidth  fullwidth" height="auto" src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1ce36b9c8-funny-weird-wtf-stock-photos-coverimage.jpg" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 261px; max-width: 245px; display: block !important;" title="Image" width="262.5" /> <!--[if mso]></td></tr></table><![endif]--></div>

            <div align="center" class="img-container center  autowidth  " style="padding-right: 0px;  padding-left: 0px; margin-top: 5px; height: 40px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0px; padding-top: 5px;" align="center"><![endif]--><img align="center" alt="Image" class="center  autowidth " height="auto" src="https://via.placeholder.com/170x40" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 192px; max-width: 168px; display: block !important;" title="Image" width="192" /> <!--[if mso]></td></tr></table><![endif]--></div>

            <div><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="80" style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;background-color:#000000;"><![endif]-->
            <div class="bwmxstext" style="color:#998b70;line-height:150%;font-family:'Roboto', sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;">
            <div style="font-size:12px;line-height:18px;color:#fff;font-family:'Roboto', sans-serif;text-align:left;height: 80px;">
            <p style="margin: 0;font-size: 12px;line-height: 18px;text-align: center"><span style="font-size: 13px; line-height: 25px;"><strong><span style="line-height: 25px; font-size: 13px;">LOREM IPSUM</span></strong></span></p>

            <p style="margin: 0;font-size: 11px;line-height: 16px;text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum dictum sollicitudin. Donec mattis mauris et massa dapibus, at posuere neque mollis.</p>
            </div>
            </div>
            <!--[if mso]></td></tr></table><![endif]--></div>

            <div align="center" class="img-container center  autowidth  " style="padding-right: 0px;  padding-left: 0px; margin-bottom: 10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;background-color:#000000;"><td width="25%" align="right"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-left.png"></td><td style="padding-right: 0px; padding-left: 0px; background-color: #fff; vertical-align: middle;" width="50%" valign="middle" align="center"><![endif]--><a href="#" style="background-color: #fff; padding: 3px 0px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 13px; color: #000; text-decoration: none; font-weight: bold; font-family: 'Open Sans', sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;BOOK NOW&nbsp;&nbsp;&nbsp;&nbsp;</a> <!--[if mso]></td><td width="25%" align="left"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-right.png"></td></tr></table><![endif]--></div>
            <!--[if (!mso)&(!IE)]><!--></div>
            <!--<![endif]--></div>
            </div>

Вот как это выглядит в Outlook 2010. Я не могу найти ни одного элемента, вызывающего этот белый разрыв. Также пытался установить основной контейнер на черный, так что, возможно, я мог бы скрыть его, но он вообще не получает цвет.

Problem

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...