0

所以，我有这个 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>

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

你知道为什么会这样吗？我想不通为什么。它应该看起来像这样：http: //jsfiddle.net/6YqmL/1/

4

1 回答 1

0

html-email 中并不始终支持标题标签。而不是使用<h3>，尝试在表格单元格或字体标签中设置它们的样式，并使用 double<br>来分隔它们。

于 2013-10-07T14:03:35.517 回答