Outlook 2016 Css проблемы

Question

У меня есть кампания электронной почты, сгенерированная с помощью монитора кампании, она отлично работает, когда я ее предварительно просматриваю или просматриваю в браузере, но это дает мне проблемы с CSS в Outlook 2016 и 2013. Класс td добавляет дополнительный интервал и, таким образом, в конечном итоге скрывает текст.

@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) { 

table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
 } 
#outlook a { padding: 0; }  
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } 
html, body { background-color: #ececec; margin: 0; padding: 0; }
#cfa-title { background-color: #5b77cc; color:#ffffff}
#cfa-title .article-title, #cfa-title .article-content {color:#ffffff;}
img { height: auto; line-height: 100%; outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}   
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #ececec; }
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #ffffff; color: #394557; }
#top-bar a { font-weight: bold; color: #394557; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
body, td { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.header-content { font-size: 12px; color: #394557; }
.header-content a { font-weight: bold; color: #394557; text-decoration: none; }
#headline p { color: #e7cba3; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #e7cba3; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #0091d1; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-title a { color: #0091d1; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #394557; margin-top: 0px; margin-bottom: 18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-content a { color: #232a34; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #394557; }
.article-content li a { color: #232a34; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #394557; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #394557; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #394557; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #394557; font-weight: bold; text-decoration: none; }
#footer { background-color: #ffffff; color: #394557; }
#footer a { color: #394557; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: normal; }
#street-address { color: #394557; white-space: normal; }
img[label="Image"] {
margin-right: 8px;
}

<body style="width:100% !important;background-color:#ececec;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;" >
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table" style="background-color:#ececec;" >
<tbody>
<tr style="border-collapse:collapse;" >
    <td align="center" bgcolor="#ececec" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
        <table class="w640"  width="640" cellpadding="0" cellspacing="0" border="0" style="margin-top:0;margin-bottom:0;margin-right:10px;margin-left:10px;" >
        <tbody>
        <tr style="border-collapse:collapse;" >
            <td class="w640" width="640" height="20" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
            </td>
        </tr>
        <tr style="border-collapse:collapse;" >
            <td class="w640" width="640" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" style="border-radius:6px 6px 0px 0px;-moz-border-radius:6px 6px 0px 0px;-webkit-border-radius:6px 6px 0px 0px;-webkit-font-smoothing:antialiased;background-color:#ffffff;color:#394557;" >
                <tbody>
                <tr style="border-collapse:collapse;" >
                    <td class="w15" width="15" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                    <td class="w325" width="350" valign="middle" align="left" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                        <table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w325" width="350" height="8" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
                        </tbody>
                        </table>
                        <div class="header-content" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-size:12px;color:#394557;" >
                            <a href="#" style="font-weight:bold;color:#394557;text-decoration:none;" >Web version</a><span class="hide">&nbsp;&nbsp;|&nbsp; <a href="#" style="font-weight:bold;color:#394557;text-decoration:none;" >Update preferences</a>&nbsp;&nbsp;|&nbsp; <a href="#" style="font-weight:bold;color:#394557;text-decoration:none;" >Unsubscribe</a></span>
                        </div>
                        <table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w325" width="350" height="8" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                    <td class="w30" width="30" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                    <td class="w255" width="255" valign="middle" align="right" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                        <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w255" width="255" height="8" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
                        </tbody>
                        </table>
                        <table cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w10" width="10" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                            <td valign="middle" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                <a href="#" style="font-weight:bold;color:#394557;text-decoration:none;" ><img src="http://i7.cmail19.com/ti/j/E1/A9D/DF8/165714/982/982/982/images/forward-glyph_0.png" border="0" width="19" height="14" alt="Forward icon" "" "" style="height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;" /></a>
                            </td>
                            <td width="3" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                            <td valign="middle" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                <div class="header-content" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-size:12px;color:#394557;" >
                                    <a href="#" style="font-weight:bold;color:#394557;text-decoration:none;" >Forward</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                        <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w255" width="255" height="8" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                    <td class="w15" width="15" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                </tr>
                </tbody>
                </table>
            </td>
        </tr>
        <tr style="border-collapse:collapse;" >
            <td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                <div align="center" style="text-align:center;" >
                    <img id="customHeaderImage" src="http://i2.cmail19.com/ti/j/E1/A9D/DF8/165714/982/982/982/images/footer.jpg" class="w640" border="0" align="top" style="display:inline;height:auto;line-height:100%;outline-style:none;text-decoration:none;" />
                </div>
            </td>
        </tr>
        <tr style="border-collapse:collapse;" >
            <td class="w640" width="640" height="30" bgcolor="#ffffff" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" style="border-radius:6px 6px 0px 0px;-moz-border-radius:6px 6px 0px 0px;-webkit-border-radius:6px 6px 0px 0px;-webkit-font-smoothing:antialiased;background-color:#ffffff;color:#394557;" >
                <tbody>
                <tr style="border-collapse:collapse;" >
                    <td class="w15" width="15" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                    <td class="w325" width="350" valign="middle" align="left" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                        &nbsp;
                    </td>
                    <td class="w30" width="30" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                    <td class="w255" width="255" valign="middle" align="right" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                        <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w255" width="255" height="8" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
                        </tbody>
                        </table>
                      
                        <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                        <tr style="border-collapse:collapse;" >
                            <td class="w255" width="255" height="8" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                    <td class="w15" width="15" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                </tr>
                </tbody>
                </table>
            </td>
        </tr>
        <tr id="simple-content-row" style="border-collapse:collapse;" >
            <td class="w640" width="640" bgcolor="#ffffff" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
               
                <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                <tbody>
                <tr style="border-collapse:collapse;" >
                    <td class="w30" width="30" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                    <td class="w580" width="580" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                        
                       
                        
                        <table class="w580" width="580" cellpadding="0" cellspacing="10" border="0">
                        <tbody>
						
                        <tr style="border-collapse:collapse;" >
                            <td class="w580" width="580" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                <p align="left" class="article-title" style="font-size:18px;line-height:24px;color:#0091d1;font-weight:bold;margin-top:0px;margin-bottom:18px;font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;" >
                                   Title 1
                                </p>
                                <table cellpadding="0" cellspacing="0" border="0" align="left">
                                <tbody>
                                <tr style="border-collapse:collapse;" >
                                    <td style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;mso-table-lspace:0 !important;mso-table-rspace:0 !important;" >
                                        <img label="Image" class="w300" width="300" border="0" src="https://i.imgur.com/kArvFgU.jpg" height="200" style="height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;" />
                                    </td>
                                    <td class="w30" width="0" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                    </td>
                                </tr>
                                <tr style="border-collapse:collapse;" >
                                    <td style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                    </td>
                                    <td class="w30" width="0" height="5" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                    </td>
                                </tr>
                                </tbody>
                                </table>
                                <div align="left" class="article-content" style="font-size:13px;line-height:18px;color:#394557;margin-top:0px;margin-bottom:18px;font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;" >
                                    <p class="outlook-text" style="margin-bottom:15px;" >
Lorem Ipsum is simply dummy text of the printing It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consec</p>
 </div>
                            </td>
                        </tr>
						
                        <tr style="border-collapse:collapse;" >
                            <td class="w580" width="580" height="10" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                            </td>
                        </tr>
						
						
						
                        </tbody>
                        </table>
                     </td>
                    <td class="w30" width="30" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                    </td>
                </tr>
                </tbody>
                </table>
            </td>
        </tr>
        <tr style="border-collapse:collapse;" >
            <td class="w640" width="640" height="15" bgcolor="#ffffff" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
            </td>
        </tr>
        <tr style="border-collapse:collapse;" >
            <td class="w640" width="640" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                <table class="w640" width="640" border="0" cellspacing="0" cellpadding="0">
                <tr style="border-collapse:collapse;" >
                    <td style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                        <img src="http://i2.cmail19.com/ti/j/E1/A9D/DF8/165714/982/982/982/images/footer.jpg" class="w640" width="640" height="250" style="height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;" />
                    </td>
                </tr>
                </table>
                <span class="hide">
                <p id="permission-reminder" align="left" class="footer-content-left" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-size:12px;line-height:15px;color:#394557;margin-top:0px;margin-bottom:15px;white-space:normal;" >
                </p>
                </span>
                <p align="left" class="footer-content-left" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-size:12px;line-height:15px;color:#394557;margin-top:0px;margin-bottom:15px;" >
                    <a href="#" style="color:#394557;font-weight:bold;text-decoration:none;" >Edit your subscription</a> | <a href="#" style="color:#394557;font-weight:bold;text-decoration:none;" >Unsubscribe instantly</a>
                </p>
            </td>
        </tr>
        <tr style="border-collapse:collapse;" >
            <td class="w640" width="640" height="60" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                &nbsp;
            </td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>
</body>

Я не могу удалить дополнительное пространство, которое появляется в Outlook.

Answer 1

Согласно моему тесту, вы можете удалить метку таблицы, используйте только img. Как это:

<td class="w580" width="580" style="font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;border-collapse:collapse;" >
                                        <p align="left" class="article-title" style="font-size:18px;line-height:24px;color:#0091d1;font-weight:bold;margin-top:0px;margin-bottom:18px;font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;" >
                                           Title 1
                                        </p>
                                                <img align="left" label="Image" class="w300" width="300" border="0" src="https://i.imgur.com/kArvFgU.jpg" height="200" style="height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;border-collapse:collapse;" />

                                        <div align="left" class="article-content" style="display:inline-block;font-size:13px;line-height:18px;color:#394557;margin-top:0px;margin-bottom:18px;font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;" >
                                            <p class="outlook-text" style="margin-bottom:15px;" >
                                            Lorem Ipsum is simply dummy text of the printing It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consec</p>
                                        </div>
                                    </td>

Это мой результат: