我是这个领域的新人。我有一个电子邮件模板的html代码，它在Web浏览器和gmail中看起来不错，但它在outlook中出现故障。我该如何解决？它在没有outlook的所有浏览器和邮件平台上都很好看。
错误在哪里？我找不到了。
<table class="deviceWidth" width="750" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="padding:0px 15px;" bgcolor="#FFFFFF">
<table class="deviceWidth" width="650" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style=" padding:20px 0px 10px 20px;" border="0" valign="top" bgcolor="#FFFFFF" align="left">
<table class="deviceWidth" border="0" width="540" style="background-color:#000;" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td valign="middle" border="0" style="background-color:#000;" align="center">
<!--[if mso]>
<table role="presentation" border="0" background="#606061" cellspacing="0" cellpadding="0" align="left" style="margin-top:0px;" width="540">
<tr>
<td align="left" bgcolor="#000;" style="background-color:#000;" valign="middle" width="540">
<![endif]-->
<table class="deviceWidth" border="0" bgcolor="#000;" style="background-color:#000;" width="55%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td colspan="1" border="0" valign="middle" width="130" class="center2" align="left" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 30px; ">
<a href="http://privateclientmortgagegroupmm.clixonit.com" valign="middle" style="text-decoration:none;color:#fff;font-size:14px; font-weight:bold;"> APPLY NOW </a>
<!-- PUT YOUR LOGO -->
</td>
<td colspan="1" border="0" valign="middle" width="130" class="center2" align="center" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 5px; ">
<a href="http://www.uberconference.com/privateclient" style="text-decoration:none;color:#A6A6A6;font-size:14px; font-weight:bold;"> GO TO MEETING </a>
<!-- PUT YOUR LOGO -->
</td>
</tr>
</tbody>
</table>
<table class="deviceWidth" border="0" bgcolor="#000;" style="background-color:#000;" width="36%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td colspan="1" border="0" valign="middle" class="center2" align="center" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 20px; ">
<a href="https://privateclient.acuityscheduling.com/" style="text-decoration:none;color:#A6A6A6;font-size:14px; font-weight:bold;"> SCHEDULE CALL </a>
<!-- PUT YOUR LOGO -->
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table class="deviceWidth" id="logo" border="0" width="100" style="margin-top:-65px;" cellspacing="0" cellpadding="0" border="0" align="right">
<tbody>
<tr>
<td class="center" border="0" valign="top" align="center">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" style="margin-top:0px;mar" width="100">
<tr>
<td align="left" bgcolor="#FFF;" style="background-color:#fff;" valign="top" width="100">
<![endif]-->
<a href="https://www.privateclient.com"> <img class="logo" src="https://s1.postimg.org/3gpcnyjmtr/logo2.png" alt="" height="96" width="100" /></a>
<!-- PUT YOUR LOGO -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
我不使用outlook，但是使用这个outlook validator，它表示outlook不支持margin-top。因此，保存图像的表上的margin-top:-65px;是问题所在。相反，您需要将图像移动到保存所有单词的tr所在的td。在其旁边添加td并将链接和图像放在该td中。乱七八糟的行高，只将黑色背景放在直接围绕每个单词的td上。
答案 1 :(得分：0)
这里的问题实际上是一些问题。我并不想变得粗鲁，我真的希望你在这里看到你做错了什么，知道为什么这会打破客户等等。
首先，您在所有表border=0中都有重复条件。这会导致整个表在许多客户端上中断。
其次，你应该尽量不要使用填充CSS，特别是在文本方面。这在电子邮件客户端中不一致。
第三，您希望在标题CSS中添加一些条件规则，以帮助您处理可怕的Outlook 2007-2010。我把那些包括在内。如果您想在其他项目中使用，可以复制/粘贴整个style她。这是我多年来开发电子邮件时遇到的标准锅炉。
最后，margin在发送电子邮件方面不是一个朋友。这是不可预测和糟糕的。试着像你在编写电子邮件时回顾到2004年的时间扭曲，并使用空的<td>单元格来创建空间。几乎每个客户端和设备的布局都应该很好。如果您有任何疑问，请告诉我一行：）
<!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, initial-scale=1" />
<meta name="format-detection" content="date=no"/>
<meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title>Untitled Document</title>
<style type="text/css">
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: collapse!important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
@media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#mobilepic img{
content:url("") !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidthleft]{
float: none !important;
width: 50% !important;
height: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
p[class=smaller] {
font-size: 36px !important;
line-height: 42px !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
</style>
</head>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#FFFFFF" style="padding: 0 !important; margin:0 !important;">
<table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="620">
<tr>
<td width="618" align="center">
<!--THIS IS THE CONTENT TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<tr>
<td bgcolor="#000000" style="background-color: #000000" align="center" height="50" valign="middle">
<table width="90%" cellspacing="0" cellpadding="0" border="0" class="content">
<tr>
<td class="fullwidth" align="left" width="33%">
<a href="http://privateclientmortgagegroupmm.clixonit.com" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">APPLY NOW</a>
</td>
<td class="fullwidth" align="center" width="34%">
<a href="http://www.uberconference.com/privateclient" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">GO TO MEETING</a>
</td>
<td class="fullwidth" align="right" width="33%">
<a href="https://privateclient.acuityscheduling.com/" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">SCHEDULE CALL</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15" style="line-height: 15px;"></td>
</tr>
<tr>
<td>
<a href="https://www.privateclient.com"> <img class="logo" src="https://s1.postimg.org/3gpcnyjmtr/logo2.png" alt="" height="96" width="100"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>