Hotmail中的HTML电子邮件问题

时间:2012-01-12 19:59:27

标签: html css

我制作的HTML电子邮件在Gmail中显示得非常好,但有一些奇怪的hotmail错误。我有以下html


<?php
[..]

$mailTxt = "<div style=\"font:11pt/22pt Arial;color:black;width:100%;background:black;text-align:justify;\">
    <div style=\"height:150px;background:black;display:table;\">
        <div style=\"display:table-cell;width:160px;vertical-align:top;\">
            <img src=\""._BASE_URL."/inc/images/SingleDays-Mailing-Logo.jpg\" style=\"margin:25px;\">
        </div>
        <div style=\"display:table-cell;vertical-align:top;\">
            <h1 style=\"font:19pt/22pt Arial;letter-spacing:-0.5pt;color:#cc2439;padding-top:40px;\">SingleDays Nieuwsbrief, ".$_POST['date']."</h1>
        </div>
    </div>
    <div style=\"background:white;margin:0 25px;padding:25px 10%;border-bottom:solid 1px #eee;\">
        <h2 style=\"font:17pt/22pt Arial;letter-spacing:-0.5pt;color:#cc2439;text-transform:uppercase;\">".$_POST['s1']."</h2>
        <p style=\"text-align:justify;\">".$_POST['t1']."</p>
    </div>
    <div style=\"display:table;background:white;margin:0 25px;border-bottom:solid 1px #eee;\">
        <div style=\"display:table-cell;padding:25px;border-right:solid 1px #eee;width:50%;\">
            <h2 style=\"font:15pt/22pt Arial;letter-spacing:-0.5pt;color:#cc2439;\">".$_POST['s2']."</h2>
            <p style=\"text-align:justify;\">".$_POST['t2']."</p>
        </div>
        <div style=\"display:table-cell;padding:25px;width:50%;\">
            <h2 style=\"font:15pt/22pt Arial;letter-spacing:-0.5pt;color:#cc2439;\">".$_POST['s3']."</h2>
            <p style=\"text-align:justify;\">".$_POST['t3']."</p>
        </div>
    </div>
    <div style=\"display:table;background:white;margin:0 25px;\">
        <div style=\"display:table-cell;padding:25px;border-right:solid 1px #eee;width:50%;\">
            <h2 style=\"font:15pt/22pt Arial;letter-spacing:-0.5pt;color:#cc2439;\">".$_POST['s4']."
            <p style=\"text-align:justify;\">".$_POST['t4']."</p>
        </div>
        <div style=\"display:table-cell;padding:25px;width:50%;\">
            <h2 style=\"font:15pt/22pt Arial;letter-spacing:-0.5pt;color:#cc2439;\">".$_POST['s5']."</h2>
            <p style=\"text-align:justify;\">".$_POST['t5']."</p>
        </div>
    </div>
    <div style=\"background:black;color:white;\">
        <p style=\"margin-left:25px;\">Je ontvangt deze nieuwsbrief omdat je aangegeven hebt deze te willen ontvangen. Via <a href=\""._BASE_URL."/unsubscribe/".md5($receivers[$i])."\" style=\"text-decoration:underline;color:#cc2439;\">deze link</a> kun je je weer uitschrijven.

</div> </div>"; [..] ?>

这在Gmail中运行得很好,但问题出现在Hotmail中(因为我正在使用没有Office的Apple,我甚至无法检查Outlook ...)

首先,我所有的标题都变成了绿色。我已经尝试了color:#cc2439 !important;,但没有任何结果,仍然是绿色

除此之外,边距处理不正确(支持should

问题对我来说似乎很基础,所以我想知道是否有人知道一个简单的解决方案我不知道如何解决颜色问题。

修改

通过用段落替换标题元素解决了颜色问题。显然,Hotmail的样式表取代了用户样式的标题

2 个答案:

答案 0 :(得分:2)

一些提示:

1 - Campaign监视器可以很好地指导不同邮件客户端支持的内容。 http://www.campaignmonitor.com/css/

2 - Exact Target(您必须付费)拥有出色的服务,可以自动在各种客户端上测试您的电子邮件并制作所有客户的屏幕截图,您可以在线查看或以PDF格式下载。 http://www.exacttarget.com/

答案 1 :(得分:1)

尝试查看邮件的来源,因为Hotmail呈现它 - 它可能会弄乱你的标签,你应该能够找到原因。

其次,我使用Chrome的Inspect Element功能检查电子邮件中的项目 - 您的样式可能正确应用,但某些其他项目会覆盖您的样式。 (Firefox中的Firebug和Safari中的开发人员工具也都这样做,我只是不知道它们的确切术语。)