html - 如何防止 outlook 破坏 div 大小？ (通讯)

Question

我正在 mailchimp 中制作时事通讯，我在使用 outlook 时遇到了这个问题，它一直在干扰我的两个专栏，如图所示:

这是这部分的代码:

<table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="fdvpeat" mc:variant="Two column block - With images">
        <tr>
                                <td width="50%" align="left" valign="top" style="border-collapse: collapse !important;">
                                    <div class="leftcolumn" style="padding: 0 10px 0 0;" mc:edit="leftcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/ea2761e8-68e4-4ebc-b5ec-e0fe6227cfce.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Planet express</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                                <td width="50%" align="left" valign="top" style="border-collapse: collapse !important;">
                                    <div class="rightcolumn" style="padding: 0 0 0 10px;" mc:edit="rightcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/96456a30-0d44-4cc6-b689-bd92b97ea6d0.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Good news everyone!</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
    </table>

它也让 TOS 居中变得困惑:

这是这部分的例子:

<tr>
                    <td align="left" valign="top" id="templateTOC" style="background-color: #969696;border-collapse: collapse !important;">
                        <div id="top"></div>
                        <h2 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #ffffff !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 21px;font-weight: bold;line-height: 129%;text-align: left;">In this issue...</h2>
                        <ul id="mctoc">
                            <li><a href="#mctoc1">Featured Research: Online Representation of the Arab World</a>
                            </li>
                            <li><a href="#mctoc2">Policy Impact</a>
                            </li>
                            <li><a href="#mctoc3">Staff News</a>
                            </li>
                            <li><a href="#mctoc4">Teaching News</a>
                            </li>
                            <li><a href="#mctoc5">Recent News</a>
                            </li>
                            <li><a href="#mctoc6">Forthcoming Events</a>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" style="border-collapse: collapse !important;">

谢谢大家的帮助。我尝试了我的东西，但作为一个初学者，我就是无法以某种方式做对。

Answer 1

对于两列，问题是 Outlook 会忽略 DIV 上的填充。将 DIV 填充移动到 TD 并将其从 50% 减少到 49%(这是我所做的，因为一些电子邮件客户端喜欢自动添加边距等，并且可能会破坏设计。使用 2% 的缓冲区，它否定了这一点) 解决了我能看到的所有前景中的问题。

<table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="fdvpeat" mc:variant="Two column block - With images">
        <tr>
                                <td width="49%" align="left" valign="top" style="padding: 0 10px 0 0; border-collapse: collapse !important;">
                                    <div class="leftcolumn" mc:edit="leftcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/ea2761e8-68e4-4ebc-b5ec-e0fe6227cfce.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Planet express</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                                <td width="49%" align="left" valign="top" style="padding: 0 0 0 10px; border-collapse: collapse !important;">
                                    <div class="rightcolumn" mc:edit="rightcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/96456a30-0d44-4cc6-b689-bd92b97ea6d0.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Good news everyone!</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
    </table>

对于 TOC - 我觉得样式表中有一些我们没有看到的样式，如果您可以提供它会有所帮助。不过，我的猜测是 LI 或 UL 元素在样式表中分配了边距或填充，而 Outlook 不喜欢这样，所以它使元素符号变得疯狂。