HTML电子邮件，Safari中的表格行跨度错误答案

【问题标题】：HTML email, table rowspan wrong in SafariHTML电子邮件，Safari中的表格行跨度错误
【发布时间】：2015-10-12 07:39:30
【问题描述】：

我正在尝试创建一个带有表格的电子邮件模板。当我给出行跨度时，Safari 中的 td 元素的高度不正确。

我给了 TD 的红色边框和绿色边框内的 div。如您所见，TD的高度太大了

<!DOCTYPE html>
<html>
<head>

</head>

<body>
    <div class="wrapper"
        style="width: 100%; height: 100%; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: left; background-color: rgb(255, 255, 255);">
        <table
            style="padding: 0px; border: medium none; border-collapse: separate; background-color: rgb(232, 232, 232); height: 510px; width: 610px; margin: 0px auto; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: left;"
            bgcolor="rgb(232, 232, 232)" border="0" cellpadding="0"
            cellspacing="10" width="610px">
            <tbody>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top">
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 0, 0); height: 90px; max-height: 90px; width: 290px; max-width: 290px;"
                        rowspan="2" colspan="2" height="90px" bgcolor="rgb(255, 0, 0)"
                        valign="top" width="290px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 0, 0); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 290px; height: 90px; position: initial;">
                            <div class="drop-block-content "
                                style="box-sizing: border-box; background-color: rgb(255, 0, 0);">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget1</p>
                                </div>
                            </div>
                        </div></td>
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 140px; max-height: 140px; width: 140px; max-width: 140px;"
                        rowspan="3" colspan="1" height="140px"
                        bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 140px; position: initial;">
                            <div class="drop-block-content "
                                style="box-sizing: border-box;">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget2</p>
                                </div>
                            </div>
                        </div></td>
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 240px; max-height: 240px; width: 140px; max-width: 140px;"
                        rowspan="5" colspan="1" height="240px"
                        bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 240px; position: initial;">
                            <div class="drop-block-content "
                                style="box-sizing: border-box;">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget3</p>
                                </div>
                            </div>
                        </div></td>
                </tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top"></tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top">
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 90px; max-height: 90px; width: 290px; max-width: 290px;"
                        rowspan="2" colspan="2" height="90px" bgcolor="rgb(255, 255, 255)"
                        valign="top" width="290px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 290px; height: 90px; position: initial;">
                            <div class="drop-block-content "
                                style=" box-sizing: border-box;">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget4</p>
                                </div>
                            </div>
                        </div></td>
                </tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top">
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(0, 76, 255); height: 190px; max-height: 190px; width: 140px; max-width: 140px;"
                        rowspan="4" colspan="1" height="190px" bgcolor="rgb(0, 76, 255)"
                        valign="top" width="140px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(0, 76, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 190px; position: initial;">
                            <div class="drop-block-content "
                                style=" box-sizing: border-box; background-color: rgb(0, 76, 255);">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget5</p>
                                </div>
                            </div>
                        </div></td>
                </tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top">
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(0, 255, 178); height: 290px; max-height: 290px; width: 140px; max-width: 140px;"
                        rowspan="6" colspan="1" height="290px" bgcolor="rgb(0, 255, 178)"
                        valign="top" width="140px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(0, 255, 178); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 290px; position: initial;">
                            <div class="drop-block-content "
                                style=" box-sizing: border-box; background-color: rgb(0, 255, 178);">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget6</p>
                                </div>
                            </div>
                        </div></td>
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 140px; max-height: 140px; width: 140px; max-width: 140px;"
                        rowspan="3" colspan="1" height="140px"
                        bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 140px; position: initial;">
                            <div class="drop-block-content "
                                style=" box-sizing: border-box;">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget7</p>
                                </div>
                            </div>
                        </div></td>
                </tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top">
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 240px; max-height: 240px; width: 140px; max-width: 140px;"
                        rowspan="5" colspan="1" height="240px"
                        bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 240px; position: initial;">
                            <div class="drop-block-content "
                                style=" box-sizing: border-box;">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget8</p>
                                </div>
                            </div>
                        </div></td>
                </tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top"></tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top">
                    <td
                        style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 140px; max-height: 140px; width: 290px; max-width: 290px;"
                        rowspan="3" colspan="2" height="140px"
                        bgcolor="rgb(255, 255, 255)" valign="top" width="290px"><div
                            class=" item"
                            style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 290px; height: 140px; position: initial;">
                            <div class="drop-block-content "
                                style=" box-sizing: border-box;">
                                <div class="textContent ng-binding "
                                    style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: Arial,&amp; quot; Helvetica Neue&amp;quot; , Helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;">
                                    <p>widget9</p>
                                </div>
                            </div>
                        </div></td>
                </tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top"></tr>
                <tr
                    style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;"
                    valign="top"></tr>
            </tbody>
        </table>
    </div>
</body>

</html>

在创建此表之前，我知道每个 TD 的高度必须是多少。（计算数量行+单元格间距）。它完美地适用于每个浏览器（Safari 以及 iPad 的电子邮件客户端）。

【问题讨论】：

标签： safari html-table html-email

【解决方案1】：

这不适用于大多数电子邮件客户端。您的许多 css 和 html 是基于 Web 的，不会被识别或处理。还有很多额外的样式是不必要的，它的内置结构很容易出现潜在问题。

我一定会：

声明一个 XHTML 文档类型
为所有结构和布局使用表格
尽可能使用 html 属性而不是 CSS
div 样式在客户端之间不一致，因此通常最好设置父表或 td 标记的样式
rowspan 和 colspan 往往不一致，最好使用嵌套表或类似的方法。

去这里看看什么css适用于什么邮件客户端：https://www.campaignmonitor.com/css/。

我也想在这里了解构建 HTML 电子邮件的一般技巧：http://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770

使用浏览器渲染是实时电子邮件测试的一个非常糟糕的替代品，因为浏览器通常具有与电子邮件客户端不同的预处理器。最好的办法是使用诸如 Email on Acid 或 Litmus 之类的服务来测试您在大多数主要电子邮件客户端上的电子邮件。

【讨论】：

感谢您的提示。我在我的电子邮件中添加了一个 XHTML docType。我试图用嵌套表创建这个结构，但我做不到。我以简单的方式“解决”了我的问题，我将这个结构放入绝对位置的 DIV 中，当您在 iPad/iPhone 上查看电子邮件时，我会显示 DIV。在其他电子邮件客户端中，我正在显示表格 html。我知道这是一个便宜的解决方案，但这是让它在 iPhone/iPad 上工作的唯一方法。