旧版 Outlook Windows 10 中标题中的白框渲染?

问题描述 投票:0回答:1

enter White Box Rendering

我在 Windows Outlook 10 中遇到了这个问题,它在我的徽标上方呈现了这个巨大的白色框,但我不知道它来自哪里或它试图读取什么内容。它在 Outlook 的 Web 版本和新版本中呈现良好,但最好修复该问题,以防有人仍在使用旧版本。有人遇到过这个问题或看到解决方案吗?

<!DOCTYPE html>
<html lang="en" dir="ltr" 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 http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
   <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
   <meta name="x-apple-disable-message-reformatting">
   <meta name="color-scheme" content="light dark">
   <meta name="supported-color-schemes" content="light dark">
    <title>MedMutual Master Template</title>
   <!--[if mso]>
      <noscript>
         <xml>
            <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
         </xml>
      </noscript>
   <![endif]-->
    
   <style type="text/css">
      table {
            border-spacing: 0;
            border-collapse: collapse;
        }
        td {
            padding: 0;
        }
        h1 {
            font-size: 24px;
            line-height: 30px;
        }
        h2 {
            font-size: 18px;
            font-weight: normal;
            line-height: 30px;
        }
        h3 {
            font-size: 16px;
            line-height: 20px;
        }
        h4 {
            font-size: 16px;
            font-weight: normal;
            line-height: 20px;
        }
        h5 {
            font-size: 14px;
            line-height: 15px;
            font-weight: normal;
        }
        p {
            font-size: 16px;
            line-height:17px;
        }
        img {
            border: 0;
            height:auto;
        }
        a {
            text-decoration: none;
            color: #00968F;
        }
       a.visited {
           color: #6D2077;
       }
      .content {
         line-height: 20px;
         font-size: 16px;
      }
       
      .btn {
         text-decoration: none;
         color: #FFF;
         background-color: #6D2077;
         border-radius: 3px;
      }
       .footer {
           padding: 15px 20px 0 20px;
           color: #ffffff;
           text-align: left;
           font-size: 12px;
       }
        .column .column-one-half .nav {
           width: 50%;
       }
       .socials td {
           vertical-align: bottom;
       }

      span.Object {
         color: inherit !important;
      }
      span.Object-hover {
         color: inherit !important;
         text-decoration:none !important;
      }

      u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
        u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference; }

      .ExternalClass {
         width: 100%;
      }
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
         line-height: 100%;
      }

      a[x-apple-data-detectors=true]{
         color: inherit !important;
         text-decoration: inherit !important;
      }

      @media screen and (max-width: 599.98px) {

         .padding{
              padding: 10px 0 10px !important;
          }
         .banner {
            height: auto !important;
            padding: 0 0 60px !important;
         }
         .column-wrapper .padding {
            padding-right: 0 !important;
            padding-left: 0 !important;
         }
          
         .column-wrapper .column,
         .column-wrapper .column img {
            width: 100% !important;
            max-width: 100% !important;
         }
         .column-wrapper {
            padding: 0 75px !important;
         }
         table.mobile-hide {
             display: none !important;
             width: 0 !important;
             height: 0 !important;
             opacity: 0 !important;
             visibility: collapse !important;
          }
        .column .column-one-half .nav {
           width: 100% !important;
            text-align: center !important;}
         
          .column-one-half {
              width: 100% !important;
          }

         .column-one-third img.one-third-col-img {
            max-width: 60% !important;
            height: auto !important;
            padding-top: 15px !important;
            background-color: transparent !important;
         }
         .column-two-third .content {
            text-align: center !important;
         }
         .column-two-third {
            padding-bottom: 30px !important;
            background-color: transparent !important;

         }
         .column-wrapper .column-one-fourth {
            width: 150px !important;
            max-width: 150px !important;
            align-content: center !important;
         }
         .column-one-fourth .content img {
            max-width: 120px !important;
             align-content: center !important;
         }
         .footer {
           padding: 10px 15px 0 15px;
           color: #ffffff;
           text-align: center;
           font-size: 12px;
       }
      }
      @media screen and (max-width: 499.98px) {
         .banner {
            padding: 0 0 50px !important;
         }
         .column-wrapper {
            padding: 0 45px !important;
         }
         table.mobile-hide {
             display: none !important;
             width: 0 !important;
             height: 0 !important;
             opacity: 0 !important;
             visibility: collapse !important;
          }
          .column .column-one-half .nav img {
              max-width:100px !important;
          }
          .footer {
           padding: 10px 15px 0 15px;
           color: #ffffff;
           text-align: center;
           font-size: 12px;
       }
          .socials {
              text-align: center !important;
          }
          
      }
      @media screen and (max-width: 399.98px) {
         .banner {
            padding: 0 0 40px !important;
         }
         .column-wrapper {
            padding: 0 20px !important;
         }
         table.mobile-hide {
             display: none !important;
             width: 0 !important;
             height: 0 !important;
             opacity: 0 !important;
             visibility: collapse !important;
          }
          .footer {
           padding: 5px 10px 0 10px;
           color: #ffffff;
           text-align: center;
           font-size: 12px;
       }
          .socials {
              text-align: center !important;
          }
      }

      :root {
         color-scheme: light dark;
         supported-color-schemes: light dark;
      }
      @media (prefers-color-scheme: dark) {
         body, table, .darkmode-bg {
            background: #2d2d2d !important;
            color: #ffffff !important;
         }
         [data-ogsc] body, table, .darkmode-bg {
            background: #2d2d2d !important;
            color: #ffffff !important;
         }
         .darkmode-transparent {
            background-color: transparent !important;
         }
         [data-ogsc] .darkmode-transparent {
            background-color: transparent !important;
         }
      }

   </style>

    <!--[if mso]>
        <style type="text/css">
            body {background-color: #dde0e1 !important;}
         body, table, td, p, a {font-family: Arial, Helvetica, sans-serif !important;}
         table {border-spacing: 0 !important;border-collapse: collapse !important;}
        </style>
    <![endif]-->
    
</head>
<body class="body" xml:lang="en" style="margin:0;padding:0;min-width:100%;background-color:#dde0e1;">

   <div style="width: 100%; table-layout:fixed; background-color: #dde0e1; color:#3d3d3d; font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin: 0 auto 40px;">
      <div style="max-width: 600px; background-color: #fafdfe; color:#3d3d3d; font-family: Arial, Helvetica, sans-serif; font-size: 16px; box-shadow: 0 0 10px rgba(0, 0, 0, .2);margin: 0 auto;">

         <!-- Preheader (remove comment) -->
         <div style="font-size: 0px; color: #fafdfe; mso-line-height-rule: exactly; line-height: 0px; display: none; max-width: 0px; max-height: 0px; opacity: 0; overflow: hidden; mso-hide:all;">
            <!-- Add Preheader Text Here (85-100 characters in length) -->
             &zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;
         </div>
         <!-- End Preheader (remove comment) -->
      
         <!--[if mso]>
            <table width="600" align="center" style="border-spacing: 0; border-collapse:collapse; color: #3d3d3d;" role="presentation">
            <tr>
            <td style="padding:0;">
         <![endif]-->

         <table align="center" style="border-spacing:0; border-collapse: collapse; color:#3d3d3d; font-family: Arial, Helvetica, sans-serif; font-size: 16px; background-color: #fafdfe; margin: 0 auto; padding:0; width: 100%; max-width: 600px;" role="presentation">
     
<!-- START TWO COLUMNS -->
            <tr>
               <td style="padding: 0;">
                  <table width="100%" style="border-spacing: 0;" cellspacing="0" borderspacing="0" role="presentation">
                     <tr>
                        <td class="column-wrapper nav" style="padding: 0; font-size: 0; text-align: left; background-color:#00968F;">

                           <!--[if mso]>
                              <table width="100%" style="border-spacing: 0;" role="presentation">
                              <tr>
                              <td width="300" valign="top" style="padding: 0;">
                           <![endif]-->

                           <table class="column column-one-half nav" style="border-spacing: 0; vertical-align: middle; width: 50%; max-width: 300px; display: inline-block;" role="presentation">
                              <tr>
                                 <td class="padding" style="padding: 10px 0 10px 20px;">

                                    <table class="content" style="border-spacing: 0; text-align: left;" role="presentation">
                                       <tr>
                                          <td>

                                             <!--[if mso]>
                                                <v:roundrect stroke="false" style="width:195pt; height:147pt;" arcsize="4%">
                                                   <v:fill sizes="195pt,147pt" type="frame" src="https://info.medmutual.com/assets/responsysimages/content/medmutualoh/MM_Logo_H(WHITE).png" href="https://www.medmutual.com">
                                                   <w:anchorlock/>
                                                </v:roundrect>
                                             <![endif]-->

                                             <a href="https://www.medmutual.com" target="_blank"><img src="https://info.medmutual.com/assets/responsysimages/content/medmutualoh/MM_Logo_H(WHITE).png" alt="Medical Mutual Logo" title="Logo" width="200" style="border: 0;max-width: 200px;"></a>
                                          </td>
                                       </tr>
                                    </table>

                                 </td>
                              </tr>
                           </table>

                           <!--[if mso]>
                           </td><td width="300" valign="middle" style="padding: 0;">
                           <![endif]-->

                           <table class="column column-one-half nav mobile-hide" style="border-spacing: 0; vertical-align: middle; width: 50%; max-width: 300px; display: inline-block;" role="presentation">
                              <tr>
                                 <td class="padding" style="padding: 10px 0 10px 80px;">
                                    <table class="content" style="border-spacing: 0; text-align: right;" role="presentation">
                                       <tr>
                                          <td>
                                             <a href="https://www.medmutual.com" target="_blank" style="color:#FFF;">
                                                <h4>Click to Visit MedMutual.com</h4>
                                             </a>
                                          </td>
                                       </tr>
                                    </table>
                                 </td>
                              </tr>
                           </table>

                           <!--[if mso]>
                              </td>
                              </tr>
                              </table>
                           <![endif]-->

                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
<!-- END TWO COLUMNS -->
windows outlook windows-10 html-email
1个回答
0
投票

这个白框特别来自代码中的以下部分:

<!--[if mso]>
   <v:roundrect stroke="false" style="width:195pt; height:147pt;" arcsize="4%">
      <v:fill sizes="195pt,147pt" type="frame" src="https://info.medmutual.com/assets/responsysimages/content/medmutualoh/MM_Logo_H(WHITE).png" href="https://www.medmutual.com">
      <w:anchorlock/>
   </v:roundrect>
<![endif]-->

这段代码是VML(一种矢量图像语言,类似于SVG)。这通常用于欺骗 Outlook 显示背景图像或制作圆角。许多电子邮件开发人员仅使用 Buttons.cmBackgrounds.cm 等工具来生成这些代码。

因为看起来您在那里不需要它,所以我建议您完全删除此代码。

© www.soinside.com 2019 - 2024. All rights reserved.