白色缝隙出现在Outlook 2010的电子邮件模板中

时间:2018-08-30 13:27:55

标签: html-email outlook-2010 email-templates

我已经使用Mailchimp构建主模板结构,然后修改了属性并添加了一些元素以使其在Outlook版本上正常工作。

在大多数Web客户端,桌面客户端(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

0 个答案:

没有答案