我在 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) -->
‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏
</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 -->
这个白框特别来自代码中的以下部分:
<!--[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.cm 和 Backgrounds.cm 等工具来生成这些代码。
因为看起来您在那里不需要它,所以我建议您完全删除此代码。