Question

当我通过PHPmailer发送邮件时，它会注释嵌入式样式表。当我收到邮件时，它的样式表已被评论。

邮件内容

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webandcrafts mail system</title></head><body><style>
        body,html{ width:100%; height:100%;}
        body{ margin: 0; padding: 0; font-size: 14px; color: #4b4b4b; font-family: 'Lato', sans-serif; line-height: 24px;}
        body p{ text-align: justify;}
        a{ text-decoration: none; color: inherit; font-size: inherit; font-style: inherit;}
        #wrapper{ background: #ececec;}
        #container{ width: 800px; height: 1207px; margin: 0 auto; background: #FFF url(images/main-img.jpg) right top no-repeat;}
        .content{ width: 470px; float: left; padding: 60px 0 0 35px;}
        h1{ font-size: 27px; line-height: 40px; font-family: 'Source Sans Pro', sans-serif; width: 395px; color: #313f47; font-weight: normal; margin: 40px 0;}
        .first-para img{ float: left;}
        .first-para p{ width: 270px; float: right; margin: 0; font-style: italic; margin-top: 3px;}
        .text-content p{ font-style: italic; margin: 15px 0;}
        .text-content p:first-of-type{ margin-top: 5px;}
        .text-content p:last-of-type{ float: right; margin: 0;}
        .text-content a{ color: #c10a0a;}
        hr{ width: 100%; height: 0; border: none; border-top: 1px dotted #b0b0b0; margin: 10px 0 0 0;}
        .bottom{ position: relative;}
        .bottom img{ margin-top: 15px; float: left;}
        .bottom a{ font-family: Tahoma; color: #4b4b4b; position: absolute; right: 0; bottom: 0;}
        .clear{ clear: both;}
</style>
<div id="wrapper">test mail</div>

我在Gmail收到的邮件

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webandcrafts mail system</title></head><body><style><!--
        body,html{ width:100%; height:100%;}
        body{ margin: 0; padding: 0; font-size: 14px; color: #4b4b4b; font-family: 'Lato', sans-serif; line-height: 24px;}
        body p{ text-align: justify;}
        a{ text-decoration: none; color: inherit; font-size: inherit; font-style: inherit;}
        #wrapper{ background: #ececec;}
        #container{ width: 800px; height: 1207px; margin: 0 auto; background: #FFF url(images/main-img.jpg) right top no-repeat;}
        .content{ width: 470px; float: left; padding: 60px 0 0 35px;}
        h1{ font-size: 27px; line-height: 40px; font-family: 'Source Sans Pro', sans-serif; width: 395px; color: #313f47; font-weight: normal; margin: 40px 0;}
        .first-para img{ float: left;}
        .first-para p{ width: 270px; float: right; margin: 0; font-style: italic; margin-top: 3px;}
        .text-content p{ font-style: italic; margin: 15px 0;}
        .text-content p:first-of-type{ margin-top: 5px;}
        .text-content p:last-of-type{ float: right; margin: 0;}
        .text-content a{ color: #c10a0a;}
        hr{ width: 100%; height: 0; border: none; border-top: 1px dotted #b0b0b0; margin: 10px 0 0 0;}
        .bottom{ position: relative;}
        .bottom img{ margin-top: 15px; float: left;}
        .bottom a{ font-family: Tahoma; color: #4b4b4b; position: absolute; right: 0; bottom: 0;}
        .clear{ clear: both;}

- ＆GT; 测试邮件

Answer 1

您的<style>标记应该在<head>中。不在您的<body>。

Answer 2

请试试这个：

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>webandcrafts mail system</title>
        <style>
        body,html{ width:100%; height:100%;}
        body{ margin: 0; padding: 0; font-size: 14px; color: #4b4b4b; font-family: 'Lato', sans-serif; line-height: 24px;}
        body p{ text-align: justify;}
        a{ text-decoration: none; color: inherit; font-size: inherit; font-style: inherit;}
        #wrapper{ background: #ececec;}
        #container{ width: 800px; height: 1207px; margin: 0 auto; background: #FFF url(images/main-img.jpg) right top no-repeat;}
        .content{ width: 470px; float: left; padding: 60px 0 0 35px;}
        h1{ font-size: 27px; line-height: 40px; font-family: 'Source Sans Pro', sans-serif; width: 395px; color: #313f47; font-weight: normal; margin: 40px 0;}
        .first-para img{ float: left;}
        .first-para p{ width: 270px; float: right; margin: 0; font-style: italic; margin-top: 3px;}
        .text-content p{ font-style: italic; margin: 15px 0;}
        .text-content p:first-of-type{ margin-top: 5px;}
        .text-content p:last-of-type{ float: right; margin: 0;}
        .text-content a{ color: #c10a0a;}
        hr{ width: 100%; height: 0; border: none; border-top: 1px dotted #b0b0b0; margin: 10px 0 0 0;}
        .bottom{ position: relative;}
        .bottom img{ margin-top: 15px; float: left;}
        .bottom a{ font-family: Tahoma; color: #4b4b4b; position: absolute; right: 0; bottom: 0;}
        .clear{ clear: both;}
       </style>        
        </head>
        <body>

<div id="wrapper">test mail</div>
</body>
</html>

PHPMailer嵌入式样式不起作用

2 个答案: