Question

我使用Litmus

测试了以下电子邮件模板

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body style="margin: 0 !important; padding: 0 !important;">

<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
    Welcome to Solemates
</div>

<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
    <tr>
        <td style="text-align: center;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/logo.gif" alt="Hotter Solemates" /></td>
    </tr>
    <tr>
        <td style="padding: 10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="580" align="center">
                <tr>
                    <td width="182" height="320" style="border:solid 4px #A2C43F; line-height:0; text-align: center; vertical-align: top;" valign="top">
                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/left.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                    </td>
                    <td width="200" height="320" style="padding: 0 3px;">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                            <tr>
                                <td style="border:solid 4px #A2C43F; height: 320px; padding: 0 10px; text-align:center;" height="320">
                                    <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 10px 0; font-family: Helvetica, Arial, sans-serif;">Dear [name],</p>
                                    <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Your Hotter Solemates membership number is</p>
                                    <p style="color: #A2C43F; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 600; font-family: Helvetica, Arial, sans-serif;">[member_id]</p>
                                    <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Return to Hotter Solemates and log in to regain access to the early previews, exclusive offers, and exciting promotions available on the Hotter Solemates hub</p>
                                    <p style="margin: 0 0 5px 0;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/return.jpg" alt="Return to Solemates" /></a></p>
                                    <p style="margin:0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/heart.jpg" alt="" /></p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="182" height="320" style="border:solid 4px #A2C43F; line-height:0; text-align: center; vertical-align: top;" valign="top">
                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/right.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="text-align: center; padding: 20px 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/explore-now.jpg" alt="Explore Now" /></td>
    </tr>
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
                <tr>
                    <td style="text-align: center;">
                        <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/chance-to-win.jpg" alt="" /></a>
                    </td>
                    <td style="text-align: center;">
                        <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/mates.jpg" alt="" /></a>
                    </td>
                    <td style="text-align: center;">
                        <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/secrets.jpg" alt="" /></a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="line-height: 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/footer.jpg" alt="" /></td>
    </tr>
    <tr>
        <td>
            <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                <tr>
                    <td style="text-align: right;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/facebook.jpg" alt="Facebook" /></a></td>
                    <td style="text-align: center;" width="70"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/twitter.jpg" alt="Twitter" /></a></td>
                    <td style="text-align: left;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/instagram.jpg" alt="Instagram" /></a></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                <tr>
                    <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                        <strong>UNSUBSCRIBE</strong><br />
                        if you want to snooze your subscription, or no longer wish to receive emails from Hotter then [unsubscribe]update your preferences[/unsubscribe].
                    </td>
                    <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                        <strong>EMAIL DELIVERY</strong><br />
                        We never send unsolicited emails. To receive all of our emails add solemates@hotter.com to your contacts.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

出于某种原因，我在Outlook 2013中的左右列中的大图像下面出现了一些间距。为什么会出现这种情况？

Answer 1

这里发生了一些不同的事情，导致电子邮件呈现错误。

首先 - 删除line-height：0;来自图像周围的td。

其次 - 我还在另一个表中嵌套了2个图像框，因此它们与中心框位于同一级别，这解决了在错误的位置应用边框时遇到的问题。

问题解决了:)）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body style="margin: 0 !important; padding: 0 !important;">

    <!-- HIDDEN PREHEADER TEXT -->
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
        Welcome to Solemates
    </div>

    <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
        <tr>
            <td style="text-align: center;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/logo.gif" alt="Hotter Solemates" /></td>
        </tr>
        <tr>
            <td style="padding: 10px;">
                <table border="0" cellpadding="0" cellspacing="0" width="580" align="center">
                    <tr>
                        <td>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td width="182" height="320" style="border:solid 4px #A2C43F; vertical-align: top;" valign="top">
                                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/left.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td width="200" height="320" style="padding: 0 3px;">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td style="border:solid 4px #A2C43F;height: 320px; padding: 0 10px; text-align:center;" height="320">
                                        <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 10px 0; font-family: Helvetica, Arial, sans-serif;">Dear [name],</p>
                                        <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Your Hotter Solemates membership number is</p>
                                        <p style="color: #A2C43F; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 600; font-family: Helvetica, Arial, sans-serif;">[member_id]</p>
                                        <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Return to Hotter Solemates and log in to regain access to the early previews, exclusive offers, and exciting promotions available on the Hotter Solemates hub</p>
                                        <p style="margin: 0 0 5px 0;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/return.jpg" alt="Return to Solemates" /></a></p>
                                        <p style="margin:0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/heart.jpg" alt="" /></p>
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td width="182" height="320" style="border:solid 4px #A2C43F; vertical-align: top;" valign="top">
                                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/right.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; padding: 20px 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/explore-now.jpg" alt="Explore Now" /></td>
        </tr>
        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
                    <tr>
                        <td style="text-align: center;">
                            <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/chance-to-win.jpg" alt="" /></a>
                        </td>
                        <td style="text-align: center;">
                            <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/mates.jpg" alt="" /></a>
                        </td>
                        <td style="text-align: center;">
                            <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/secrets.jpg" alt="" /></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="line-height: 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/footer.jpg" alt="" /></td>
        </tr>
        <tr>
            <td>
                <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                    <tr>
                        <td style="text-align: right;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/facebook.jpg" alt="Facebook" /></a></td>
                        <td style="text-align: center;" width="70"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/twitter.jpg" alt="Twitter" /></a></td>
                        <td style="text-align: left;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/instagram.jpg" alt="Instagram" /></a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                    <tr>
                        <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                            <strong>UNSUBSCRIBE</strong><br />
                            if you want to snooze your subscription, or no longer wish to receive emails from Hotter then [unsubscribe]update your preferences[/unsubscribe].
                        </td>
                        <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                            <strong>EMAIL DELIVERY</strong><br />
                            We never send unsolicited emails. To receive all of our emails add solemates@hotter.com to your contacts.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>

展望2013年出现的图像空间

1 个答案: