为什么我的 font-sizes 被 Outlook 2007、10、13、16、19 更改了？

Question

我已经尝试了很多修复程序来启用 Outlook 2007+ (07,10,13,16,19) 来呈现我构建的电子邮件。

我已尝试重置文档和表格。我尝试了很多不同的容器，例如 span、font、p & td's 来包含文本，所有容器都指定了 font-size 和 line-height。放入元标记，更改 html 标记。然而，它只是被忽略了，电子邮件中的所有文本都显示在 font-size: 16px.

是否有明确的方法来保证我的字体显示的大小与我将它们编码为在 Outlook 07+ 版本中的大小相同？

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
   <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
   <meta name="viewport" content="width=device-width">
   <meta content="telephone=no" name="format-detection">
   <meta name="ProgId" content="Word.Document" />
   <meta name="Generator" content="Microsoft Word 12" />
   <meta name="Originator" content="Microsoft Word 12" />
   <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!--<![endif]-->
   <title>blah Terminal</title>
   <link href="" rel="icon" type="image/x-icon">
   <!--[if mso]>
    <style>
     .fallback-font {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     }
    </style>
    <![endif]-->
    <!--[if gte mso 9]>
     <style>
      a:visited {
       color:#f58220;
      }
     </style>
    <![endif]-->
    <!--[if (gte mso 9)|(IE)]>
     <style type="text/css">
      table {
       border-collapse: collapse;
       border-spacing: 0; 
       mso-line-height-rule: exactly; 
       mso-margin-bottom-alt: 0; 
       mso-margin-top-alt: 0; 
       mso-table-lspace: 0pt;
       mso-table-rspace: 0pt;
      }
     </style>
    <![endif]-->
    <!--[if gt mso 15]>
    <style type="text/css" media="all">
     table, tr, td {
      border-collapse: collapse;
     }
    </style>
   <![endif]-->
   <!--[if gtemso 9]><xml>
    <o:OfficeDocumentSettings>
     <o:AllowPNG/>
     <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
   </xml><![endif]-->
   <style type="text/css">
    /* Fonts */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    body,
    p,
    a,
    input,
    textarea,
    button,
    input[type=text],
    input[type=submit],
    table,
    td,
    div,
    span,
    * {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     font-weight: bold!important;
     line-height: inherit;
     -webkit-font-smoothing:antialiased;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     font-weight: bold!important;
     margin:0;
    }
    body,
    p,
    a,
    input,
    textarea,
    button,
    input[type=text],
    input[type=submit],
    table,
    td,
    div,
    span {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     font-weight: bold!important;
    }
    /* END Fonts */

    body {
     margin: 0 auto !important;
     padding: 0 !important;
     height: 100% !important;
     width: 100% !important;
    }
    table,
    td {
     border-collapse: collapse;
     mso-table-lspace: 0pt !important;
     mso-table-rspace: 0pt !important;
    }
    img {
     display: block;
     white-space: pre-line;
     -ms-interpolation-mode:bicubic;
    }
    a {
     text-decoration: none;
    }
    .ExternalClass * {
     line-height: 115%;
    }

    @media only screen and (max-width: 640px) {
     table[class=full-width],
     img[class=full-width],
     table[class=full-width_footer],
     a[class=full-width],
     div[class=full-width] {
      width: 100% !important;
      height: auto !important;
     }
    }

    @media only screen and (max-width: 480px) {
     table[class=small-full-width],
     img[class=small-full-width],
     table[class=small-full-width_footer],
     a[class=small-full-width],
     div[class=small-full-width] {
      width: calc(100% - 40px)!important;
      height: auto !important;
     }
    }

    @media only screen and (max-width: 640px) {
     table[class=full-width-margin] {
      width: 100% !important;
      height: auto !important;
      margin: 0 0 20px !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=singleColumn] {
      width: 100% !important;
      float: left !important;
     }
    }

    @media only screen and (max-width: 640px) {
     table[class=hide],
     td[class=hide],
     tr[class=hide],
     span[class=hide] {
      display: none !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=textJustify],
     a[class=textJustify] {
      text-align: justify !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=textCenter],
     a[class=textCenter] {
      text-align: center !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=textRight],
     a[class=textRight] {
      text-align: right !important;
     }
    }

    @media only screen and (max-width: 640px) {
     div[class=show] {
      display: block !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=smallTxt],
     a[class=smallTxt],
     span[class=smallTxt] {
      font-size: 11px !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=mediumTxt],
     a[class=mediumTxt],
     span[class=mediumTxt] {
      font-size: 14px !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=largeTxt],
     a[class=largeTxt],
     span[class=largeTxt] {
      font-size: 18px !important;
     }
    }

    @media only screen and (max-width: 640px) {
     table[class=singleColumnMobileShow] {
      display: block !important;
      visibility: visible !important;
      overflow: auto !important;
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
     }
    }

    @media only screen and (max-width: 640px) {
     tr[class=singleColumnMobileShow] {
      display: block !important;
      visibility: visible !important;
      overflow: auto !important;
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
     }
    }

    @media only screen and (max-width: 640px) {
     td[class=singleColumnMobileShow] {
      display: block !important;
      visibility: visible !important;
      overflow: auto !important;
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
     }
    }

    @media only screen and (max-width: 640px) {
     [class=mobile-show] {
      overflow: visible !important;
      height: auto !important;
      display: block !important;
      line-height: 100% !important;
     }
    }

    @media only screen and (min-width: 481px) {
     div[class=singleColumnMobileShow] {
      display: block !important;
      visibility: visible !important;
      overflow: auto !important;
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
     }
    }

    a:visited {
     color: #f58220;
    }
   </style>
   <style sh-font-styles="">
    /* Generated by SharpSpring -- Do not edit */
    [class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;}
    [class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;}
   </style>
  </head>

  <body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0 !important;mso-line-height-rule:exactly;">
   <!--[if mso]>
   <style type="text/css">
    body, table, td, a, span {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    }
   </style>
   <![endif]-->
   <table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
     <td align="center" valign="top" width="100%">
      <table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;">
       <tr>
        <td width="640" align="center" valign="top">
         <table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;">
          <tr>
           <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;">
           </td>
           <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;">
           </td>
           <td width="500" align="center" valign="top">
            <table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;">
             <tr>
              <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;">&nbsp;</td>
             </tr>
             <tr>
              <td width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px !important;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;">
               <span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;">Are you still interested in how</span><br/>
               <span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;color:#ffffff;">blah Terminal</span> <span style="font-size:24px !important;line-height:28px;">can help you outperform your Investment Management peers?</span>
              </td>
             </tr>
             <tr>
              <td width="500" valign="top" height="10" style="line-height:10px;font-size:10px !important;">&nbsp;</td>
             </tr>
             <tr>
              <td width="500" align="center" valign="top" style="color:#ffffff;font-size:12px !important;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;">
               <span style="font-size:12px !important;line-height:16px;mso-line-height-alt:20px;">blah Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.</span>
              </td>
             </tr>
             <tr>
              <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;">&nbsp;</td>
             </tr>
             <tr>
              <td width="500" align="center" valign="top">
               <div class="small-full-width">
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.blahterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff">
                 <w:anchorlock/>
                 <center>
                  <![endif]-->
                  <a class="small-full-width" href="https://free-trial.blahterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif !important;font-size:12px !important;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;">GET YOUR FREE TRIAL OF blah TERMINAL</a>
                  <!--[if mso]>
                 </center>
                </v:roundrect>
                <![endif]-->
               </div>
              </td>
             </tr>
             <tr>
              <td width="500" valign="top" height="30" style="line-height:30px;font-size:30px !important;">&nbsp;</td>
             </tr>
            </table>
           </td>
           <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;">
           </td>
           <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;">
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </body>
 </html>

结果如下：

如果您参考这张图片，您会看到大标题在 outlook 2007+ 版本中显示的尺寸要小得多。

编辑： 解决方案 结果是，确保我使用 [=60= 在头部应用样式] 以及通过定位属性（一些引擎必须忽略元素的定位）。除了删除 !important.

的所有 inline-style 用途外

这是供您查看的更新代码段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
  <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta content="telephone=no" name="format-detection">
  <meta name="ProgId" content="Word.Document" />
  <meta name="Generator" content="Microsoft Word 12" />
  <meta name="Originator" content="Microsoft Word 12" />
  <!--[if !mso]><!-->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <title>Example Terminal</title>
  <link href="" rel="icon" type="image/x-icon">
  <!--[if mso]>
   <style>
    .fallback-font {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    }
   </style>
   <![endif]-->
   <!--[if gte mso 9]>
    <style>
     a:visited {
      color:#f58220;
     }
    </style>
   <![endif]-->
   <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
     table {
      border-collapse: collapse;
      border-spacing: 0; 
      mso-line-height-rule: exactly; 
      mso-margin-bottom-alt: 0; 
      mso-margin-top-alt: 0; 
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
     }
    </style>
   <![endif]-->
   <!--[if gt mso 15]>
   <style type="text/css" media="all">
    table, tr, td {
     border-collapse: collapse;
    }
   </style>
  <![endif]-->
  <!--[if gtemso 9]><xml>
   <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
   </o:OfficeDocumentSettings>
  </xml><![endif]-->
  <style type="text/css">
   /* Fonts */
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   body,
   p,
   a,
   input,
   textarea,
   button,
   input[type=text],
   input[type=submit],
   table,
   td,
   div,
   span,
   *,
   .base {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: bold!important;
    line-height: inherit;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
   }
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: bold!important;
    margin:0;
   }
   body,
   p,
   a,
   input,
   textarea,
   button,
   input[type=text],
   input[type=submit],
   table,
   td,
   div,
   span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: bold!important;
   }
   /* END Fonts */

   body {
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
   }
   table,
   td {
    border-collapse: collapse;
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
   }
   img {
    display: block;
    white-space: pre-line;
    -ms-interpolation-mode:bicubic;
   }
   a {
    text-decoration: none;
   }
   .ExternalClass * {
    line-height: 115%;
   }

   @media only screen and (max-width: 640px) {
    table[class=full-width],
    img[class=full-width],
    table[class=full-width_footer],
    a[class=full-width],
    div[class=full-width] {
     width: 100% !important;
     height: auto !important;
    }
   }

   @media only screen and (max-width: 480px) {
    table[class=small-full-width],
    img[class=small-full-width],
    table[class=small-full-width_footer],
    a[class=small-full-width],
    div[class=small-full-width] {
     width: calc(100% - 40px)!important;
     height: auto !important;
    }
   }

   @media only screen and (max-width: 640px) {
    table[class=full-width-margin] {
     width: 100% !important;
     height: auto !important;
     margin: 0 0 20px !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=singleColumn] {
     width: 100% !important;
     float: left !important;
    }
   }

   @media only screen and (max-width: 640px) {
    table[class=hide],
    td[class=hide],
    tr[class=hide],
    span[class=hide] {
     display: none !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=textJustify],
    a[class=textJustify] {
     text-align: justify !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=textCenter],
    a[class=textCenter] {
     text-align: center !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=textRight],
    a[class=textRight] {
     text-align: right !important;
    }
   }

   @media only screen and (max-width: 640px) {
    div[class=show] {
     display: block !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=smallTxt],
    a[class=smallTxt],
    span[class=smallTxt] {
     font-size: 11px !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=mediumTxt],
    a[class=mediumTxt],
    span[class=mediumTxt] {
     font-size: 14px !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=largeTxt],
    a[class=largeTxt],
    span[class=largeTxt] {
     font-size: 18px !important;
    }
   }

   @media only screen and (max-width: 640px) {
    table[class=singleColumnMobileShow] {
     display: block !important;
     visibility: visible !important;
     overflow: auto !important;
     width: 100% !important;
     height: auto !important;
     max-height: none !important;
    }
   }

   @media only screen and (max-width: 640px) {
    tr[class=singleColumnMobileShow] {
     display: block !important;
     visibility: visible !important;
     overflow: auto !important;
     width: 100% !important;
     height: auto !important;
     max-height: none !important;
    }
   }

   @media only screen and (max-width: 640px) {
    td[class=singleColumnMobileShow] {
     display: block !important;
     visibility: visible !important;
     overflow: auto !important;
     width: 100% !important;
     height: auto !important;
     max-height: none !important;
    }
   }

   @media only screen and (max-width: 640px) {
    [class=mobile-show] {
     overflow: visible !important;
     height: auto !important;
     display: block !important;
     line-height: 100% !important;
    }
   }

   @media only screen and (min-width: 481px) {
    div[class=singleColumnMobileShow] {
     display: block !important;
     visibility: visible !important;
     overflow: auto !important;
     width: 100% !important;
     height: auto !important;
     max-height: none !important;
    }
   }

   a:visited {
    color: #f58220;
   }
  </style>
  <style sh-font-styles="">
   /* Generated by SharpSpring -- Do not edit */
   [class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;}
   [class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;}
  </style>
 </head>

 <body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0;mso-line-height-rule:exactly;">
  <!--[if mso]>
  <style type="text/css">
   body, table, td, a, span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
  </style>
  <![endif]-->
  <table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
   <tr>
    <td align="center" valign="top" width="100%">
     <table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;">
      <tr>
       <td width="640" align="center" valign="top">
        <table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;">
         <tr>
          <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;">
          </td>
          <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;">
          </td>
          <td width="500" align="center" valign="top">
           <table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;">
            <tr>
             <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;">&nbsp;</td>
            </tr>
            <tr>
             <td class="base" width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">
              <span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;">Are you still interested in how</span><br/>
              <span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;color:#ffffff;">Example Terminal</span> <span class="base" style="font-size:24px;line-height:28px;">can help you outperform your Investment Management peers?</span>
             </td>
            </tr>
            <tr>
             <td width="500" valign="top" height="10" style="line-height:10px;font-size:10px;">&nbsp;</td>
            </tr>
            <tr>
             <td class="base" width="500" align="center" valign="top" style="color:#ffffff;font-size:12px;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">
              <span class="base" style="font-size:12px;line-height:16px;mso-line-height-alt:20px;">Example Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.</span>
             </td>
            </tr>
            <tr>
             <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;">&nbsp;</td>
            </tr>
            <tr>
             <td width="500" align="center" valign="top">
              <div class="small-full-width">
               <!--[if mso]>
               <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.Exampleterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff">
                <w:anchorlock/>
                <center>
                 <![endif]-->
                 <a class="small-full-width base" href="https://free-trial.Exampleterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;">GET YOUR FREE TRIAL OF Example TERMINAL</a>
                 <!--[if mso]>
                </center>
               </v:roundrect>
               <![endif]-->
              </div>
             </td>
            </tr>
            <tr>
             <td width="500" valign="top" height="30" style="line-height:30px;font-size:30px;">&nbsp;</td>
            </tr>
           </table>
          </td>
          <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;">
          </td>
          <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;">
          </td>
         </tr>
        </table>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </body>
</html>

实际工作代码：

非常感谢贡献者，为我省去了很多麻烦！ <3

Answer 1

删除您添加的所有内联 !important 语句。这导致了 Outlook 中的问题。
不知道为什么（可能是内联 !important 语句无效）但在对象初始状态下不需要它们。
!important 只应在头部使用以覆盖对象的初始状态。

我也会从你头脑中的属性选择器转移开来 CSS。它已经过时，可能不再适用于任何地方。我会简单地将它们转换为一般 class 声明。
即：table[class=full-width] 变为 .full-width。

为什么我的 font-sizes 被 Outlook 2007、10、13、16、19 更改了？

Why are my font-sizes changed by Outlook 2007, 10, 13, 16, 19?

html

css

outlook

html-email