Question

我的电子邮件html代码，当我通过mailchimp发送时，图层被破坏，看起来与正常情况完全不同。我已经使用了表格格式，但它仍然没有用。我也使用了基本的mailchimp teplate。但没有任何工作。在这里我附上了代码：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:title" content="*|MC:SUBJECT|*" />
    <title>title</title>
    <style type="text/css">
        body{margin:0;padding:0;font-family: 'Libre Baskerville', serif;}.main{width:600px;margin:0 auto;display:block;overflow:hidden;}img{width:100%}.logo{background:url(img/logo.png) center center no-repeat;min-height:100px;border-bottom:3px #7A7A7A solid}.logo p{margin-top:60px}.title h1{color:#FF4013;font-size:68px;margin-top:15px;text-align: center;margin-bottom:15px}.subtitle p{color:#008CB4;border-top:1px #A8A8A8 solid;border-bottom:1px #A8A8A8 solid;padding-top:15px;padding-bottom:15px;font-size:18px;text-align:center;font-style:italic}.left{float:left;width:36%;background-color:#EBEBEB;padding-left:10px;padding-right:10px;text-align:justify}.left p{font-size:13px;line-height:16px}strong{line-height:25px}.left h4{color:#008CB4;border-bottom:1px dotted #008CB4;text-decoration:none}.right{float:right;width:57%;border-left:1px solid #B2B2B2;padding-left:10px}.right h2{color:#0C8CB4;font-size:20px}.right p{line-height:20px;font-size:15px}.right img{width: 100%!important;}.footer p{margin-top:30px;}.footer a{margin-top:30px;clear: both;} @media (max-width: 400px) {.title h1{font-size: 38px;}.right{float:none;clear: both;}.subtitle p{font-size: 14px;text-align: left;}.left{width: 55%;padding-left: 10px;} .left p{font-size: 15px; line-height: 20px;}}
    </style>
</head>

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">

    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellpadding="0" cellspacing="0" width="600">
                    <tr>
                        <td valign="top">
                            <div class="main">
                                <div class="logo">
                                    <p style="float:left; color:#008CB4;">The Bharat Army Newsletter</p>
                                    <p style="float:right; color:#008CB4;">June 2015</p>
                                </div>
                                <div class="title">
                                    <h1>BHARAT ARMY</h1>
                                </div>
                                <div class="subtitle">
                                    <p>Your Quarterly Newsletter for all things Indian Cricket!</p>
                                </div>
                                <div class="left">
                                    <p>The Bharat Army will be travelingto India in March 2016 for the T20 World Cup. Limited number of seats will be available to join the tour and experience a World Cup</p>

                                </div>
                                <div class="right">
                                    <img src="img/1.png">

                                    <img src="img/2.png">
                                </div>
                                <div class="footer">
                                    <a style="color:#008CB4; float:left" href="ex.com">www.ex.com</a>
                                    <p style="color:#008CB4; float:right">1</p>
                                </div>

                            </div>
                        </td>
                    </tr>
                </table>
                <br />
            </td>
        </tr>
    </table>

</body>

Answer 1

电子邮件的显示方式取决于呈现的内容 - 所有不同的客户端和平台经常会出现令人沮丧的不一致特性。例如，某些电子邮件客户端将完全忽略<head>节点内的所有内容，在您的情况下，这将使电子邮件看起来非常不同。

你提到你正在使用MailChimp。我可以推荐他们的“Inbox Inspector”服务（由Litmus提供支持），您可以在其中预览电子邮件在各种客户端中的外观。

如果您不支付MailChimp的费用，您将无法执行此操作 - 但可能会尝试直接使用Litmus之类的工具（它可以免费使用）。

为什么在将html简报发送给收件人时更改布局？

1 个答案: