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 から電子メール アプリを使用すると、正常に動作しません。幅を変更し、すべてのテーブル セルを 1 行に配置します。すべてのセルを別の行に簡単に追加することでこれを解決できることはわかっていますが、他に解決策がない限り、これは必要ありません。

なぜこれが起こっているのか分かりますか？理由がわかりません。次のようになります: http://jsfiddle.net/6YqmL/1/

4

1 に答える 1

0

ヘッダー タグは、html-email では一貫してサポートされていません。を使用する代わりに<h3>、テーブル セルまたはフォント タグでスタイルを設定し、double を使用<br>してそれらを分離してみてください。

于 2013-10-07T14:03:35.517 に答える