Question

所以，我有这个HTML电子邮件：

<!Doctype HTML><html>
<head>
    <!-- Meta -->
    <meta charset="utf-8">
</head>
<table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;">
    <tr class="header">
        <td class="logo" style="padding-top: 10px; padding-left: 20px;">
            <img src="header_logo.png" alt="Logoimage"/>
        </td>
    </tr>
</table>
<table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;">
    <tr style="width: 100%; display: block;">
        <td style=""><h2>Congratulations on your new website!</h2></td>
        <td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;">
            General description here.. write whatever you want.
        </td>
    </tr>
    <tr style="width: 100%; display: block;">
        <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>Account information</h2></td>
        <td class="content" style="margin-top:20px; width:100%; display: block;">
            <h3 style="margin: 0">First name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_FIRST_NAME!!</span></h3>
            <h3 style="margin: 0">Last name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_LAST_NAME!!</span></h3>
            <h3 style="margin: 0">Email:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_EMAIL!!</span></h3>
            <h3 style="margin: 0">Phone:<span style="font-weight: normal; margin-left: 10px;">!!PHONE!!</span></h3>
        </td>
        <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; width: 100%"><h2>Property information</h2></td>
        <td class="content" style="margin-top:20px; width: 100%; display: block;">
            <h3 style="margin: 0">Listing Site:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_IS_LISTED!!</span></h3>
            <h3 style="margin: 0">Listing Number:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_ID!!</span></h3>
            <h3 style="margin: 0">Property Name:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_NAME!!</span></h3>
            <h3 style="margin: 0">Address:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STREET_ADDRESS!!</span></h3>
            <h3 style="margin: 0">City:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_CITY!!</span></h3>
            <h3 style="margin: 0">State:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3>
            <h3 style="margin: 0">Country:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3>
        </td>
    </tr>
    <tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;">
        <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td>
        <td class="content" style="margin-top:20px; display: block;">
            <h3 style="margin: 0">Site URL:<span style="font-weight: normal; margin-left: 10px;">!!SITE_URL!!</span></h3>
            <h3 style="margin: 0">Design name:<span style="font-weight: normal; margin-left: 10px;">!!DESIGN_NAME!!</span></h3>
            <img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/Latestwizard/images/designs/design3.jpg" alt="Site template preview"/>
        </td>
    </tr>
</table>
<table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;">
    <tr class="copyright">
        <td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">&copy; 2013</td>
    </tr>
</table></html>

它在主要电子邮件客户端上显示我想要的（全宽表格单元格） - 用于Android的Gmail，Thunderbird，Gmail应用程序，但是当使用来自iPad的电子邮件应用程序时，它无法正常运行..它不会“占用” 100％宽度并将所有表格单元格放在一行中。我知道我可以通过在一个单独的行中轻松添加每个单元格来解决这个问题，但除非没有其他解决方案，否则我不希望这样。

你有什么想法为什么会这样？我无法理解为什么。它看起来应该是这样的：http://jsfiddle.net/6YqmL/1/

Answer 1

html-email中不一致支持标题标记。而不是使用<h3>，尝试在表格单元格或字体标记中设置样式，并使用双<br>分隔它们。

iPad电子邮件模板问题

1 个答案: