问题描述
我为我的 Outlook 配置文件创建了自定义电子邮件 HTML 签名，但是当我添加到我的签名并将文件从 HTML 重写为 HTM 时，此签名不起作用。当我在 OUTLOOK 中打开签名进行编辑时，它是一个空的编辑器页面。
你能写一篇评论并就这个问题给我建议吗？
我第一次创建了这个电子邮件签名，但我不知道我错在哪里。
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style media="screen" type="text/css">
.arial {
font-family: Arial;
}
.container {
max-width: 650px;
}
.font-14 {
font-size: 14px;
}
.font-12 {
font-size: 12px;
}
.font-10 {
font-size: 10px;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.blue {
color: rgb(24,71,132);
}
.image {
max-width: 600px;
height: auto;
}
.profile {
width: 90px;
height: 90px;
object-fit: cover;
object-position: center top;
}
.fa {
display: inline-block;
}
.height-space {
height: 20px;
}
.tr-height {
height: 20px;
}
@media only screen and (max-width: 1100px) {
.image {
width: 450px;
}
.container {
max-width: 450px;
}
.profile {
max-width: 70px;
max-height: 70px;
}
.fa {
display: none;
}
}
@media only screen and (max-width: 900px) {
.height-space {
height: 10px;
}
.tr-height {
height: 15px;
}
}
@media only screen and (max-width: 500px) {
.font-14 {
font-size: 12px;
}
.font-12 {
font-size: 10px;
}
.font-10 {
font-size: 8px;
}
.height-space {
height: 7px;
}
.image {
width: 350px;
}
.container {
max-width: 350px;
}
.profile {
max-width: 50px;
max-height: 50px;
}
}
</style>
</head>
</html>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial container"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<span class="sc-kgAjT cuzzPp" style="margin-right: 15px; display: block;">
<img src="https://paralympic.sk/wp-content/uploads/2021/01/AC4Q2271-scaled.jpg" role="presentation"
class="sc-cHGsZl bHiaRe profile">
</span>
</td>
<td style="vertical-align: middle;">
<h3 color="#184784" class="sc-fBuWsC eeihxG blue font-14" style="margin: 0px;">
<span>Tomáš</span><span> </span><span>Valach</span>
</h3>
<p color="#000000" font-size="large" class="sc-fMiknA bxZCMx font-12"
style="margin: 0px; color: rgb(0,0); line-height: 22px;">
<span><b>Motivátor</b></span>
</p>
<p color="#000000" font-size="large" class="sc-dVhcbM fghLuF font-12"
style="margin: 0px; font-weight: 500; color: rgb(0,0); line-height: 16px;">
<span><span class="fa">Národný projekt </span><b> SME SI ROVNÍ</b></span>
</p>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#184784" direction="vertical" width="1" class="sc-jhAzac hmXDXQ blue"
style="width: 0px; border-bottom: none; border-left: 2px solid;"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr class="tr-height" style="vertical-align: middle;">
<td style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Mobil:
</p><a href="tel:0914196212" color="#000000" class="sc-gipzik iyhjGb font-10 i-block"
style="text-decoration: underline; color: rgb(0,0);"><span>0914196212</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
E-mail:
</p>
<a href="mailto:tomas.valach@smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0,0);"><span>tomas.valach@smesirovni.sk</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Web:
</p>
<a href="www.smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0,0);"><span>www.smesirovni.sk</span></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td class="height-space"></td>
</tr>
<tr>
<td color="#184784" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ"
style="width: 100%; border-bottom: 2px solid rgb(24,132); border-left: none; display: block;"></td>
</tr>
<tr>
<td class="height-space"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="height-space">
<p class="font-10" style="text-align: center; padding: 0 30px;">Tento projekt sa realizuje vďaka podpore z
Európskeho sociálneho
a Európskeho fondu
regionálneho rozvoja v
rámci Operačného programu Ľudské zdroje.</p>
<p class="font-10" style="text-align: center;"><a href="https://www.employment.gov.sk/sk/esf/"
class="font-10">www.esf.gov.sk</a>,<a href="https://www.employment.gov.sk/sk/"
class="font-10">www.employment.gov.sk</a></p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img class="image" src="oplz.png" alt="" srcset="">
</td>
</tr>
</tbody>
</table>
解决方法
不支持 media 属性。事实上，Outlook 使用 Word 来呈现邮件正文的 HTML 标记。您可以在以下文章中找到所有支持和不支持的 HTML 元素、属性和级联样式表属性：
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
您在开始 table 之前关闭了 HTML。我还添加了一个 body 标签，下面是相同的（完整）代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style media="screen" type="text/css">
.arial {
font-family: Arial;
}
.container {
max-width: 650px;
}
.font-14 {
font-size: 14px;
}
.font-12 {
font-size: 12px;
}
.font-10 {
font-size: 10px;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.blue {
color: rgb(24,71,132);
}
.image {
max-width: 600px;
height: auto;
}
.profile {
width: 90px;
height: 90px;
object-fit: cover;
object-position: center top;
}
.fa {
display: inline-block;
}
.height-space {
height: 20px;
}
.tr-height {
height: 20px;
}
@media only screen and (max-width: 1100px) {
.image {
width: 450px;
}
.container {
max-width: 450px;
}
.profile {
max-width: 70px;
max-height: 70px;
}
.fa {
display: none;
}
}
@media only screen and (max-width: 900px) {
.height-space {
height: 10px;
}
.tr-height {
height: 15px;
}
}
@media only screen and (max-width: 500px) {
.font-14 {
font-size: 12px;
}
.font-12 {
font-size: 10px;
}
.font-10 {
font-size: 8px;
}
.height-space {
height: 7px;
}
.image {
width: 350px;
}
.container {
max-width: 350px;
}
.profile {
max-width: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial container"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<span class="sc-kgAjT cuzzPp" style="margin-right: 15px; display: block;">
<img src="https://paralympic.sk/wp-content/uploads/2021/01/AC4Q2271-scaled.jpg" role="presentation"
class="sc-cHGsZl bHiaRe profile">
</span>
</td>
<td style="vertical-align: middle;">
<h3 color="#184784" class="sc-fBuWsC eeihxG blue font-14" style="margin: 0px;">
<span>Tomáš</span><span> </span><span>Valach</span>
</h3>
<p color="#000000" font-size="large" class="sc-fMiknA bxZCMx font-12"
style="margin: 0px; color: rgb(0,0); line-height: 22px;">
<span><b>Motivátor</b></span>
</p>
<p color="#000000" font-size="large" class="sc-dVhcbM fghLuF font-12"
style="margin: 0px; font-weight: 500; color: rgb(0,0); line-height: 16px;">
<span><span class="fa">Národný projekt </span><b> SME SI ROVNÍ</b></span>
</p>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#184784" direction="vertical" width="1" class="sc-jhAzac hmXDXQ blue"
style="width: 0px; border-bottom: none; border-left: 2px solid;"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr class="tr-height" style="vertical-align: middle;">
<td style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Mobil:
</p><a href="tel:0914196212" color="#000000" class="sc-gipzik iyhjGb font-10 i-block"
style="text-decoration: underline; color: rgb(0,0);"><span>0914196212</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
E-mail:
</p>
<a href="mailto:tomas.valach@smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0,0);"><span>tomas.valach@smesirovni.sk</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Web:
</p>
<a href="www.smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0,0);"><span>www.smesirovni.sk</span></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td class="height-space"></td>
</tr>
<tr>
<td color="#184784" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ"
style="width: 100%; border-bottom: 2px solid rgb(24,132); border-left: none; display: block;"></td>
</tr>
<tr>
<td class="height-space"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="height-space">
<p class="font-10" style="text-align: center; padding: 0 30px;">Tento projekt sa realizuje vďaka podpore z
Európskeho sociálneho
a Európskeho fondu
regionálneho rozvoja v
rámci Operačného programu Ľudské zdroje.</p>
<p class="font-10" style="text-align: center;"><a href="https://www.employment.gov.sk/sk/esf/"
class="font-10">www.esf.gov.sk</a>,<a href="https://www.employment.gov.sk/sk/"
class="font-10">www.employment.gov.sk</a></p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img class="image" src="oplz.png" alt="" srcset="">
</td>
</tr>
</tbody>
</table>
</body>
</html>