使用php / outlook发送html电子邮件不能正确显示html

时间:2015-03-16 09:34:17

标签: php html email outlook

我正在使用php在send_email.php文件中发送如下的html电子邮件:

 <?php
// multiple recipients
$to  = 'mark.obrien2014@inbox.com';

// subject
$subject = 'Hewden New Supplier Setup';

// message
$message = file_get_contents('../../assets/email/email.php');

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: Mark <mark.obrien2014@inbox.com>' . "\r\n";
$headers .= 'From: Hewden New Supplier Setup <NewSuppliers@hewden.co.uk>' . "\r\n";
$headers .= 'Cc: purchasing@hewden.co.uk' . "\r\n";
$headers .= 'Bcc: birthdaycheck@example.com' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);
?>

我使用

将我的电子邮件html包含在单独的文件email.php中
 $message = file_get_contents('../../assets/email/email.php');

我正在测试我的电子邮件已经在Windows上使用Outlook 2010发送,并且还在普通的webmail中进行测试。电子邮件在两者上发送正常,但在展望中html似乎没有正确显示。我的电子邮件在其他所有电子邮件程序和所有其他网络邮件中都很好有谁能告诉我我做错了什么?提前谢谢

我的电子邮件html:

<html>
<head>
  <title>Birthday Reminders for August</title>
</head>
<body leftpadding="0" offset="0" paddingheight="0" paddingwidth="0" toppadding="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background:#F6F6F6; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <table align="center" class='bgBody' border="0" cellpadding="0" cellspacing="0" style="font-family:helvetica, sans-serif; background:#fff; border:1px solid #999; margin-top:50px;" width="750">
                <tr>
        <td align="center">
            <img src="http://hewdenportal.co.uk/assets/email/images/bigImg.png" width="750" height="258" />
        </td>
                </tr>
            </table>

    </tr>
</table>

        <table align="center" class='bgBody' border="0" cellpadding="0" cellspacing="0" style="font-family:helvetica, sans-serif; font-weight:100; font-size:16px; background:#000; color:#4f4f4f; border:1px solid #999; margin-top:20px;" width="752">
                <tr>
        <td align="left">
            <div class="container" style="min-height:200px; width:690; background:#fff; padding-left:30px; padding-right:30px; padding-top:20px; padding-bottom:20px; font-family:helvetica, sans-serif; font-weight:100; font-size:15px;">
                <div class="text" style="width:72%;">
                <h1 style="font-family:helvetica, sans-serif; font-weight:100; font-size:20px;">Getting Started</h1>
                <p>Thanks for taking an Interest in joining Hewden as an approved supplier.<br/>We care about providing a good quality to service to Customer's and Supplier's alike.</p>
                <p>As part of the Hewden journey blah blah blah.</p>
                </div>
                <div class="find_more" style="width:110px; border:1px solid #666; height:20px; background:rgba(255,195,82,1); margin-top:10px; float:right; position:relative; cursor:pointer; cursor:hand; text-align:center; padding:6px;">Find out More ></div>
            </div>
        </td>
                </tr>
            </table>    
</body>
</html>

电子邮件显示正确的html:

email showing correct html

电子邮件在Outlook中使用扭曲的html:

email in outlook

2 个答案:

答案 0 :(得分:0)

在html电子邮件中使用div有点棘手,如果你可以使用table,那么一般来说会更容易。我猜这里的具体问题是Outlook 2010不支持widthpositionfloat div。 Campaign Monitor撰写了一篇很好的综合div兼容性here

答案 1 :(得分:0)

使用或<button>标记代替<div>标记。 据我所知(我经常发送HTML电子邮件),Outlook和其他电子邮件提供商更接受按钮。 HTML电子邮件有时非常烦人......:)