简体   繁体   中英

PHPMailer embedded style is not working

when I send mail through PHPmailer it comment the embedded style sheet. When I receive the mail it style sheet has been commented.

mail content

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

Mail that I received in 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;} 

--> Test Mail

Your <style> tag should be in your <head> . Not in your <body> .

Please try this:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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