Safari中的HTML电子邮件，表rowpan错误

时间：2015-07-22 12:20:13

标签： safari html-table html-email

我正在尝试使用表格创建电子邮件模板。当我给出rowspan时，Safari中的td元素的高度不正确。

Table that goes wrong 我给TD带了一个红色边框，div在绿色边框内。如你所见TD的高度太大

Plunker：http://plnkr.co/J1Yph9 

<!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的高度必须是多少。 （计算行数+ cellspacing的数量）。它完全适用于每个浏览器（Safari和iPad的电子邮件客户端）。

1 个答案:

答案 0 :(得分：0)

这在大多数电子邮件客户端中都不起作用。很多你的CSS和你的HTML都是基于网络的，不会被识别或处理。还有许多额外的设计是不必要的，它内置的结构容易出现潜在的问题。

我肯定会：

  1. 声明XHTML doctype
  2. 将表用于所有结构和布局
  3. 尽可能使用html属性而不是CSS
  4. div样式在客户端之间不一致，因此通常更好地设置父表或td标签的样式
  5. rowspan和colspan往往不一致，最好使用嵌套表或类似方法。

    6. 点击此处查看哪些css适用于哪个电子邮件客户端：https://www.campaignmonitor.com/css/。

    我还会到这里查看构建HTML电子邮件的一般提示：http://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770

    使用浏览器呈现是实时电子邮件测试的一个很差的替代品，因为浏览器通常具有与电子邮件客户端不同的预处理器。您最好的选择是使用像Acid on Litmus或Litmus这样的服务来测试您在大多数主要电子邮件客户端上的电子邮件。

相关问题
最新问题