Zurb 墨水面板在页面上延伸

Question

我正在使用 Zurb Ink 制作 html 电子邮件。使用面板，它在浏览器中看起来是正确的，宽度为 601 像素。但在 Safari OS（Mac book）上的 Outlook 中，面板一直延伸到电子邮件（如页脚或页眉）。

在 Safari 的 Outlook 上应该是这样吗？还是我的代码有问题？

           <table class="row">
                <tr>
                    <td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">

                        <table class="twelve columns container">
                            {% for item in object_list %}
                            <tr>
                                 <td class="four sub-columns">
                                     {% if not item.user_assigned %}
                                     <table class="tiny-button small radius alert">
                                         <tr>
                                             <td>unssigned</td>
                                     {% else %}
                                     <table class="tiny-button small radius success">
                                         <tr>
                                             <td>assigned</td>
                                    {% endif %}
                                         </tr>
                                     </table>
                                 </td>
                                 <td class="eight sub-columns last">
                                     {{ item.date_due }} - {{ item.action }}
                                 </td>
                                 <td class="expander"></td>
                             </tr>
                             {% endfor %}
                         </table>
                     </td>
                 </tr>
             </table>
         </td>
     </tr>
 </table>

Answer 1

看起来是因为您缺少包装器和容器。

在docs 中提到以下内容：

container - 在大屏幕上将内容限制为 580 像素的包装（在小屏幕上为 95%），并将其在正文中居中。

wrapper - 包装每个 .columns 表格，以便在列之间创建一个装订线并强制它们在小屏幕上展开到全宽。