简体   繁体   English

使用php / Outlook发送html电子邮件无法正确显示html

[英]sending html email using php / outlook not displaying html properly

i am using php to send a html email like so in my send_email.php file: 我正在使用php发送HTML电子邮件,例如在我的send_email.php文件中:

 <?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);
?>

I am including my email html in a seperate file email.php using 我使用以下方式将我的电子邮件html包含在单独的文件email.php中

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

I am testing my email has been sent using Outlook 2010 on windows and also testing it in a normal webmail. 我正在测试我的电子邮件已经在Windows上使用Outlook 2010发送,并且还在正常的Webmail中进行了测试。 The email sends fine on both but in outlook the html doesn't seem to display properly. 电子邮件在这两者上均发送正常,但是在Outlook中,html似乎无法正确显示。 My email looks fine in every other email program and all other webmail. 我的电子邮件在所有其他电子邮件程序和所有其他网络邮件中看起来都不错。 can someone please show me what i am doing wrong? 有人可以告诉我我在做什么错吗? thanks in advance 提前致谢

my email 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>

email in webmail showing correct html: 网络邮件中显示正确html的电子邮件:

电子邮件显示正确的html

email in outlook with distorted html: 在Outlook中使用扭曲的html发送电子邮件:

在Outlook中发送电子邮件

Using div in html emails is a little tricky and if you can get away with table that'd be easier in general. 在html电子邮件中使用div有点棘手,并且如果您可以摆脱table困扰,那通常会更容易。 I would guess the specific issue here is that Outlook 2010 doesn't support width , position , or float for div . 我想这里的具体问题是Outlook 2010不支持div widthpositionfloat Campaign Monitor wrote a nice roundup of div compatibility here . Campaign Monitor 在这里编写了一个很好的div兼容性综述。

Use or <button> tags instead of a <div> tag. 使用或<button>标记代替<div>标记。 As far as I know (I send HTML emails pretty often), buttons are well more accepted on Outlook and other email providers. 据我所知(我经常发送HTML电子邮件),Outlook和其他电子邮件提供程序上的按钮已被广泛接受。 HTML emails are very annoying sometimes... :) HTML电子邮件有时非常烦人... :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM