基础电子邮件模板 - Gmail 不显示任何模板样式

Question

我正在发送一封电子邮件，其中包含 Codeigniter 3 配置的 HTML 格式的邮件，这里是配置代码。

邮件设置：

$config = Array (
    'priority'  => 1,
    'protocol'  => 'mail', 
    'smtp_host' => 'ssl://smtp.gmail.com', 
    'smtp_port' => 465,
    'smtp_user' => 'email@gmail.com',
    'smtp_pass' => 'password',
    'mailtype'  => 'html', 
    'charset'   => 'utf-8', // iso-8859-1
    'wordwrap'  => TRUE, 
    'newline'   => "\r\n"
);

控制器：

public function email() 
{
    $this->load->library('email');
    $this->email->from('email@email.com', 'Names');
    $this->email->to('email@email.com');
    $this->email->subject('Email Test');

    $data['nombre'] = 'Example';
    $body = $this->load->view('email/test.php',$data,TRUE);
    //$this->email->attach("/assets/images/logo.png", "inline");
    $this->email->message($body);
    if ($this->email->send()) {
     return true;
    } else {
     return false;
    }
    $this->email->clear(TRUE);
}

查看 - 默认电子邮件模板基础：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style>
#outlook a {
    padding: 0;
}
body {
    width: 100%!important;
    min-width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}
.ExternalClass {
    width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
#backgroundTable {
    margin: 0;
    padding: 0;
    width: 100%!important;
    line-height: 100%!important;
}
img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
    width: auto;
    max-width: 100%;
    float: left;
    clear: both;
    display: block;
}
center {
    width: 100%;
    min-width: 580px;
}
a img {
    border: none;
}
p {
    margin: 0 0 0 10px;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    border-collapse: collapse!important;
}
table, tr, td {
    padding: 0;
    vertical-align: top;
    text-align: left;
}
hr {
    color: #d9d9d9;
    background-color: #d9d9d9;
    height: 1px;
    border: none;
}
table.body {
    height: 100%;
    width: 100%;
}
table.container {
    width: 580px;
    margin: 0 auto;
    text-align: inherit;
}
table.row {
    padding: 0px;
    width: 100%;
    position: relative;
}
table.container table.row {
    display: block;
}
td.wrapper {
    padding: 10px 20px 0px 0px;
    position: relative;
}
table.columns, table.column {
    margin: 0 auto;
}
table.columns td, table.column td {
    padding: 0px 0px 10px;
}
table.columns td.sub-columns, table.column td.sub-columns, table.columns td.sub-column, table.column td.sub-column {
    padding-right: 10px;
}
td.sub-column, td.sub-columns {
    min-width: 0px;
}
table.row td.last, table.container td.last {
    padding-right: 0px;
}
table.one {
    width: 30px;
}
table.two {
    width: 80px;
}
table.three {
    width: 130px;
}
table.four {
    width: 180px;
}
table.five {
    width: 230px;
}
table.six {
    width: 280px;
}
table.seven {
    width: 330px;
}
table.eight {
    width: 380px;
}
table.nine {
    width: 430px;
}
table.ten {
    width: 480px;
}
table.eleven {
    width: 530px;
}
table.twelve {
    width: 580px;
}
table.one center {
    min-width: 30px;
}
table.two center {
    min-width: 80px;
}
table.three center {
    min-width: 130px;
}
table.four center {
    min-width: 180px;
}
table.five center {
    min-width: 230px;
}
table.six center {
    min-width: 280px;
}
table.seven center {
    min-width: 330px;
}
table.eight center {
    min-width: 380px;
}
table.nine center {
    min-width: 430px;
}
table.ten center {
    min-width: 480px;
}
table.eleven center {
    min-width: 530px;
}
table.twelve center {
    min-width: 580px;
}
table.one .panel center {
    min-width: 10px;
}
table.two .panel center {
    min-width: 60px;
}
table.three .panel center {
    min-width: 110px;
}
table.four .panel center {
    min-width: 160px;
}
table.five .panel center {
    min-width: 210px;
}
table.six .panel center {
    min-width: 260px;
}
table.seven .panel center {
    min-width: 310px;
}
table.eight .panel center {
    min-width: 360px;
}
table.nine .panel center {
    min-width: 410px;
}
table.ten .panel center {
    min-width: 460px;
}
table.eleven .panel center {
    min-width: 510px;
}
table.twelve .panel center {
    min-width: 560px;
}
.body .columns td.one, .body .column td.one {
    width: 8.333333%;
}
.body .columns td.two, .body .column td.two {
    width: 16.666666%;
}
.body .columns td.three, .body .column td.three {
    width: 25%;
}
.body .columns td.four, .body .column td.four {
    width: 33.333333%;
}
.body .columns td.five, .body .column td.five {
    width: 41.666666%;
}
.body .columns td.six, .body .column td.six {
    width: 50%;
}
.body .columns td.seven, .body .column td.seven {
    width: 58.333333%;
}
.body .columns td.eight, .body .column td.eight {
    width: 66.666666%;
}
.body .columns td.nine, .body .column td.nine {
    width: 75%;
}
.body .columns td.ten, .body .column td.ten {
    width: 83.333333%;
}
.body .columns td.eleven, .body .column td.eleven {
    width: 91.666666%;
}
.body .columns td.twelve, .body .column td.twelve {
    width: 100%;
}
td.offset-by-one {
    padding-left: 50px;
}
td.offset-by-two {
    padding-left: 100px;
}
td.offset-by-three {
    padding-left: 150px;
}
td.offset-by-four {
    padding-left: 200px;
}
td.offset-by-five {
    padding-left: 250px;
}
td.offset-by-six {
    padding-left: 300px;
}
td.offset-by-seven {
    padding-left: 350px;
}
td.offset-by-eight {
    padding-left: 400px;
}
td.offset-by-nine {
    padding-left: 450px;
}
td.offset-by-ten {
    padding-left: 500px;
}
td.offset-by-eleven {
    padding-left: 550px;
}
td.expander {
    visibility: hidden;
    width: 0px;
    padding: 0!important;
}
table.columns .text-pad, table.column .text-pad {
    padding-left: 10px;
    padding-right: 10px;
}
table.columns .left-text-pad, table.columns .text-pad-left, table.column .left-text-pad, table.column .text-pad-left {
    padding-left: 10px;
}
table.columns .right-text-pad, table.columns .text-pad-right, table.column .right-text-pad, table.column .text-pad-right {
    padding-right: 10px;
}
.block-grid {
    width: 100%;
    max-width: 580px;
}
.block-grid td {
    display: inline-block;
    padding: 10px;
}
.two-up td {
    width: 270px;
}
.three-up td {
    width: 173px;
}
.four-up td {
    width: 125px;
}
.five-up td {
    width: 96px;
}
.six-up td {
    width: 76px;
}
.seven-up td {
    width: 62px;
}
.eight-up td {
    width: 52px;
}
table.center, td.center {
    text-align: center;
}
h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
    text-align: center;
}
span.center {
    display: block;
    width: 100%;
    text-align: center;
}
img.center {
    margin: 0 auto;
    float: none;
}
.show-for-small, .hide-for-desktop {
    display: none;
}
body, table.body, h1, h2, h3, h4, h5, h6, p, td {
    color: #222222;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 {
    word-break: normal;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 36px;
}
h3 {
    font-size: 32px;
}
h4 {
    font-size: 28px;
}
h5 {
    font-size: 24px;
}
h6 {
    font-size: 20px;
}
body, table.body, p, td {
    font-size: 14px;
    line-height: 19px;
}
p.lead, p.lede, p.leed {
    font-size: 18px;
    line-height: 21px;
}
p {
    margin-bottom: 10px;
}
small {
    font-size: 10px;
}
a {
    color: #2ba6cb;
    text-decoration: none;
}
a:hover {
    color: #2795b6!important;
}
a:active {
    color: #2795b6!important;
}
a:visited {
    color: #2ba6cb!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #2ba6cb;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: #2ba6cb!important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #2ba6cb!important;
}
.panel {
    background: #f2f2f2;
    border: 1px solid #d9d9d9;
    padding: 10px!important;
}
.sub-grid table {
    width: 100%;
}
.sub-grid td.sub-columns {
    padding-bottom: 0;
}
table.button, table.tiny-button, table.small-button, table.medium-button, table.large-button {
    width: 100%;
    overflow: hidden;
}
table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td {
    display: block;
    width: auto!important;
    text-align: center;
    background: #2ba6cb;
    border: 1px solid #2284a1;
    color: #ffffff;
    padding: 8px 0;
}
table.tiny-button td {
    padding: 5px 0 4px;
}
table.small-button td {
    padding: 8px 0 7px;
}
table.medium-button td {
    padding: 12px 0 10px;
}
table.large-button td {
    padding: 21px 0 18px;
}
table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a {
    font-weight: bold;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-size: 16px;
}
table.tiny-button td a {
    font-size: 12px;
    font-weight: normal;
}
table.small-button td a {
    font-size: 16px;
}
table.medium-button td a {
    font-size: 20px;
}
table.large-button td a {
    font-size: 24px;
}
table.button:hover td, table.button:visited td, table.button:active td {
    background: #2795b6!important;
}
table.button:hover td a, table.button:visited td a, table.button:active td a {
    color: #fff!important;
}
table.button:hover td, table.tiny-button:hover td, table.small-button:hover td, table.medium-button:hover td, table.large-button:hover td {
    background: #2795b6!important;
}
table.button:hover td a, table.button:active td a, table.button td a:visited, table.tiny-button:hover td a, table.tiny-button:active td a, table.tiny-button td a:visited, table.small-button:hover td a, table.small-button:active td a, table.small-button td a:visited, table.medium-button:hover td a, table.medium-button:active td a, table.medium-button td a:visited, table.large-button:hover td a, table.large-button:active td a, table.large-button td a:visited {
    color: #ffffff!important;
}
table.secondary td {
    background: #e9e9e9;
    border-color: #d0d0d0;
    color: #555;
}
table.secondary td a {
    color: #555;
}
table.secondary:hover td {
    background: #d0d0d0!important;
    color: #555;
}
table.secondary:hover td a, table.secondary td a:visited, table.secondary:active td a {
    color: #555!important;
}
table.success td {
    background: #5da423;
    border-color: #457a1a;
}
table.success:hover td {
    background: #457a1a!important;
}
table.alert td {
    background: #c60f13;
    border-color: #970b0e;
}
table.alert:hover td {
    background: #970b0e!important;
}
table.radius td {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
table.round td {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}
body.outlook p {
    display: inline!important;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
    width: auto!important;
    height: auto!important;
}
table[class="body"] center {
    min-width: 0!important;
}
table[class="body"] .container {
    width: 95%!important;
}
table[class="body"] .row {
    width: 100%!important;
    display: block!important;
}
table[class="body"] .wrapper {
    display: block!important;
    padding-right: 0!important;
}
table[class="body"] .columns, table[class="body"] .column {
    table-layout: fixed!important;
    float: none!important;
    width: 100%!important;
    padding-right: 0px!important;
    padding-left: 0px!important;
    display: block!important;
}
table[class="body"] .wrapper.first .columns, table[class="body"] .wrapper.first .column {
    display: table!important;
}
table[class="body"] table.columns td, table[class="body"] table.column td {
    width: 100%!important;
}
table[class="body"] .columns td.one, table[class="body"] .column td.one {
    width: 8.333333%!important;
}
table[class="body"] .columns td.two, table[class="body"] .column td.two {
    width: 16.666666%!important;
}
table[class="body"] .columns td.three, table[class="body"] .column td.three {
    width: 25%!important;
}
table[class="body"] .columns td.four, table[class="body"] .column td.four {
    width: 33.333333%!important;
}
table[class="body"] .columns td.five, table[class="body"] .column td.five {
    width: 41.666666%!important;
}
table[class="body"] .columns td.six, table[class="body"] .column td.six {
    width: 50%!important;
}
table[class="body"] .columns td.seven, table[class="body"] .column td.seven {
    width: 58.333333%!important;
}
table[class="body"] .columns td.eight, table[class="body"] .column td.eight {
    width: 66.666666%!important;
}
table[class="body"] .columns td.nine, table[class="body"] .column td.nine {
    width: 75%!important;
}
table[class="body"] .columns td.ten, table[class="body"] .column td.ten {
    width: 83.333333%!important;
}
table[class="body"] .columns td.eleven, table[class="body"] .column td.eleven {
    width: 91.666666%!important;
}
table[class="body"] .columns td.twelve, table[class="body"] .column td.twelve {
    width: 100%!important;
}
table[class="body"] td.offset-by-one, table[class="body"] td.offset-by-two, table[class="body"] td.offset-by-three, table[class="body"] td.offset-by-four, table[class="body"] td.offset-by-five, table[class="body"] td.offset-by-six, table[class="body"] td.offset-by-seven, table[class="body"] td.offset-by-eight, table[class="body"] td.offset-by-nine, table[class="body"] td.offset-by-ten, table[class="body"] td.offset-by-eleven {
    padding-left: 0!important;
}
table[class="body"] table.columns td.expander {
    width: 1px!important;
}
table[class="body"] .right-text-pad, table[class="body"] .text-pad-right {
    padding-left: 10px!important;
}
table[class="body"] .left-text-pad, table[class="body"] .text-pad-left {
    padding-right: 10px!important;
}
table[class="body"] .hide-for-small, table[class="body"] .show-for-desktop {
    display: none!important;
}
table[class="body"] .show-for-small, table[class="body"] .hide-for-desktop {
    display: inherit!important;
}
}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}@media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}@media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
</head>
<body>
<script type="text/javascript">ANCHORFREE_VERSION="413161526"</script><script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(/^(.*,)?(11C)(,.*)?$/g.exec(_AF2$.CT)!=null){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/par.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}document.write("<style type='text/css' title='AFc_css"+_AF2$.RN+"' >.AFc_body"+_AF2$.RN+"{} .AFc_all"+_AF2$.RN+",a.AFc_all"+_AF2$.RN+":hover,a.AFc_all"+_AF2$.RN+":visited{outline:none;background:transparent;border:none;margin:0;padding:0;top:0;left:0;text-decoration:none;overflow:hidden;display:block;z-index:666999;}</style>");})();</script>
<style type='text/css'>
.AFhss_dpnone{display:none;width:0;height:0}
</style>
<img src="about:blank"id="AFhss_trk"name="AFhss_trk"style="display:none"/>
<div id="AFhss_dfs"class="AFhss_dpnone">
  <div id="AFhss_adrp0"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp1"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp2"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp3"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp4"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp5"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp6"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp7"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp8"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp9"class="AFhss_dpnone"></div>
</div>
<script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(_AF2$.TOP==1){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/41.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}})()</script>
<table class="body">
  <tr>
    <td class="center" align="center" valign="top"><center>
        <table class="row header">
          <tr>
            <td class="center" align="center"><center>
                <table class="container">
                  <tr>
                    <td class="wrapper last"><table class="twelve columns">
                        <tr>
                          <td class="six sub-columns"><img src="http://placehold.it/200x50"></td>
                          <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;"><span class="template-label">HERO</span></td>
                          <td class="expander"></td>
                        </tr>
                      </table></td>
                  </tr>
                </table>
              </center></td>
          </tr>
        </table>
        <br>
        <table class="container">
          <tr>
            <td><table class="row">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td><h1>Hi, Elijah Baily</h1>
                          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                          <img width="580" height="300" src="http://placehold.it/580x300"></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row callout">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td class="panel"><p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td><h3>Title Ipsum <small>This is a note.</small></h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row">
                <tr>
                  <td class="wrapper last"><table class="three columns">
                      <tr>
                        <td><table class="button">
                            <tr>
                              <td><a href="#">Click Me!</a></td>
                            </tr>
                          </table></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row footer">
                <tr>
                  <td class="wrapper"><table class="six columns">
                      <tr>
                        <td class="left-text-pad"><h5>Connect With Us:</h5>
                          <table class="tiny-button facebook">
                            <tr>
                              <td><a href="#">Facebook</a></td>
                            </tr>
                          </table>
                          <br>
                          <table class="tiny-button twitter">
                            <tr>
                              <td><a href="#">Twitter</a></td>
                            </tr>
                          </table>
                          <br>
                          <table class="tiny-button google-plus">
                            <tr>
                              <td><a href="#">Google +</a></td>
                            </tr>
                          </table></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                  <td class="wrapper last"><table class="six columns">
                      <tr>
                        <td class="last right-text-pad"><h5>Contact Info:</h5>
                          <p>Phone: 408.341.0600</p>
                          <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td align="center"><center>
                            <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
                          </center></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
        </table>
      </center></td>
  </tr>
</table>
</body>
</html>

邮件显示无样式：

非常感谢您的支持，非常感谢。

Answer 1

在搜索和阅读许多论坛后，我找到了解决方案，感谢社区电子邮件基金会等，我在这里解释了一些有用的细节。

大多数公司，如电子邮件、Gmail、AOL、Hotmail 等...他们清理位于 <head> 内的标签 <style>，这样做是为了避免 [=60] 的冲突=]，所以解决办法是将所有内联样式放在每个label correspodan中，例如：

<h1 style="font-size: 14px; font-weight: 500;">My title</h1>

对一条线执行此操作非常简单，但是当我们想要一个光滑、制作精良且细节层次非常高的模板时，一次执行此操作是违反直觉的，为此有一种称为 Emogrifier 的转换技术，这极大地方便了工作，debmos 所做的是设计和布局我们的基本模板，具有组织和分离的样式，以具有结构良好和组织良好的页面，但同样不能通过电子邮件发送，所以我提到，我们必须对草图进行 Emogrifier通过粘贴所有 HTML 和 CSS 代码来准备，为此有很多工具，这里我强烈推荐 3 个，但是有很多。

推荐页面：

您执行的电子邮件模板应如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    line-height: 1.65;
}
img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
body, .body-wrap {
    width: 100% !important;
    height: 100%;
    background: #efefef;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
}
a {
    color: #71bc37;
    text-decoration: none;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.button {
    display: inline-block;
    color: white;
    background: #71bc37;
    border: solid #71bc37;
    border-width: 10px 20px 8px;
    font-weight: bold;
    border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
    line-height: 1.25;
}
h1 {
    font-size: 32px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 20px;
}
h5 {
    font-size: 16px;
}
p, ul, ol {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 20px;
}
.container {
    display: block !important;
    clear: both !important;
    margin: 0 auto !important;
    max-width: 580px !important;
}
.container table {
    width: 100% !important;
    border-collapse: collapse;
}
.container .masthead {
    padding: 80px 0;
    background: #71bc37;
    color: white;
}
.container .masthead h1 {
    margin: 0 auto !important;
    max-width: 90%;
    text-transform: uppercase;
}
.container .content {
    background: white;
    padding: 30px 35px;
}
.container .content.footer {
    background: none;
}
.container .content.footer p {
    margin-bottom: 0;
    color: #888;
    text-align: center;
    font-size: 14px;
}
.container .content.footer a {
    color: #888;
    text-decoration: none;
    font-weight: bold;
}
</style>
</head>
<body>
<table class="body-wrap">
  <tr>
    <td class="container"><!-- Message start -->

      <table>
        <tr>
          <td align="center" class="masthead"><h1>Something Big...</h1></td>
        </tr>
        <tr>
          <td class="content"><h2>Hi Stranger,</h2>
            <p>Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
            <table>
              <tr>
                <td align="center"><p> <a href="#" class="button">Share the Awesomeness</a> </p></td>
              </tr>
            </table>
            <p>By the way, if you're wondering where you can find more of this fine meaty filler, visit <a href="http://baconipsum.com">Bacon Ipsum</a>.</p>
            <p><em>– Mr. Pen</em></p></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td class="container"><!-- Message start -->

      <table>
        <tr>
          <td class="content footer" align="center"><p>Sent by <a href="#">Company Name</a>, 1234 Yellow Brick Road, OZ, 99999</p>
            <p><a href="mailto:">hello@company.com</a> | <a href="#">Unsubscribe</a></p></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

加工或制作Emogrifier时，您应该如下：

<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef">
<table class="body-wrap" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->

      <table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" class="masthead" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: white; background: #71bc37; margin: 0; padding: 80px 0;" bgcolor="#71bc37"><h1 style="font-size: 32px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; max-width: 90%; text-transform: uppercase; margin: 0 auto; padding: 0;">Something Big...</h1></td>
        </tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white; margin: 0; padding: 30px 35px;" bgcolor="white"><h2 style="font-size: 28px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; margin: 0 0 20px; padding: 0;">Hi Stranger,</h2>
            <p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
            <table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"> <a href="#" class="button" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: white; text-decoration: none; display: inline-block; font-weight: bold; border-radius: 4px; background: #71bc37; margin: 0; padding: 0; border-color: #71bc37; border-style: solid; border-width: 10px 20px 8px;">Share the Awesomeness</a> </p></td>
              </tr></table><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">By the way, if you're wondering where you can find more of this fine meaty filler, visit <a href="http://baconipsum.com" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: #71bc37; text-decoration: none; margin: 0; padding: 0;">Bacon Ipsum</a>.</p>
            <p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"><em style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">– Mr. Pen</em></p></td>
        </tr></table></td>
  </tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->

      <table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content footer" align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white none; margin: 0; padding: 30px 35px;" bgcolor="white"><p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">Sent by <a href="#" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: #888; text-decoration: none; font-weight: bold; margin: 0; padding: 0;">Company Name</a>, 1234 Yellow Brick Road, OZ, 99999</p>
            <p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center"><a href="mailto:" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: #888; text-decoration: none; font-weight: bold; margin: 0; padding: 0;">hello@company.com</a> | <a href="#" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: #888; text-decoration: none; font-weight: bold; margin: 0; padding: 0;">Unsubscribe</a></p></td>
        </tr></table></td>
  </tr></table></body>
</html>

如果他们对 Emogrifier 进行了很多更改，我建议不要保存模板，以使他们更容易应用更改，然后进行处理 Emogrifier.

希望你觉得有用。

非常感谢！

基础电子邮件模板 - Gmail 不显示任何模板样式

Foundation email template - Gmail does not display any template style

zurb-foundation

html-email

codeigniter-3