我正在使用 VML 代码在 HTML 邮件中显示背景。我在一个表格单元格中有 3 个表格，它们并排放置，但是当我在 Outlook 中测试我的电子邮件时，表格不再彼此相邻，它使我的三个表格垂直对齐，就像每个表格都在一个行。
这是我的代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table bgcolor="#ffffff" width="600" border="0" cellpadding="0" cellspacing="0"
align="center" class="normal" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;">
<tr>
<td background="http://i.imgur.com/YJOX1PC.png" style="background-image:url('http://i.imgur.com/YJOX1PC.png');" bgcolor="#7bceeb" width="600" height="700" valign="top">
<!--[if gte mso 9]>
<v:rect strokecolor='none' style='width:600px;height:700px;'>
<v:fill color='#363636' src='http://i.imgur.com/YJOX1PC.png' type='tile'></v:fill>
</v:rect>
<v:shape id='NameHere' style='position:absolute;width:600px;height:700px;'></v:shape>
<![endif]-->
<div><table width="580" border="0" cellpadding="0"
cellspacing="0" align="center" class=
"spaced2" >
<tr>
<td valign="top" style="border:none;"><table class="aligntable" border="0" cellpadding=
"0" cellspacing="0" align="left"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr>
<td height="20"> </td></tr>
<tr>
<td width="180" align="center"><img border="0" src=
"" width="180" height="180" /></td>
</tr>
<tr>
<td width="180" valign="middle" align="center"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;">
<center>
TEST
</center></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
<tr>
<td width="180" height="255" valign="top"
align="left" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td>
</tr>
<tr>
<td align="center" valign="top" width="180"><img src=
""
border="0"
/></a></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
</table>
<table width="20" align="left" border="0">
<tr>
<td></td>
</tr>
</table>
<table class="aligntable2" border="0" cellpadding=
"0" cellspacing="0" align="left"
style=
"display:block; mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr>
<tr>
<td width="180" align="center"> <img border="0" src=
"" width="180" height="180" /></td>
</tr>
<tr>
<td width="180" valign="middle" align="center"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;">
<center>
TEST
</center></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
<tr>
<td width="180" height="255" valign="top"
align="left" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;"> TEST</td>
</tr>
<tr>
<td align="center" width="180"><a target="_blank" style=
"FONT-SIZE: 16px; COLOR: #0e5fd8; -webkit-text-size-adjust:none; FONT-FAMILY: Verdana, Arial; text-decoration:none; line-height:16px;"
href=
"http://www.philips.at/c-p/NTRX100_12/?origin=3_at_de_spoilyourself2__ot_dec__hero_img&elqtrack=true"> <img src=
""
border="0" /></a></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
</table>
<table class="aligntable3" border="0" cellpadding=
"0" cellspacing="0" align="right"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr>
<tr>
<td width="180" align="center"><img border="0" src=
"" width="180" height="180" /></td>
</tr>
<tr>
<td width="180" valign="middle" align="center"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;">
<center>
TEST
</center></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
<tr>
<td width="180" height="255" valign="top"
align="left" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td>
</tr>
<tr>
<td align="center" width="180"> <img src=
"" alt=
width="50"
border="0"/></a></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
</table></td>
</tr>
</table>
<!--END TD -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
最佳答案
嘿，我刚刚也遇到了这个问题并找到了解决办法。
这里发生的是在 </table> 之后在 <table> 之前, Outlook VML 添加了一个 Word 段落标记，它强制表格显示为堆叠而不是相互内嵌。
在 </table><table> 之间放这段条件代码
<!--[if mso]></td><td><![endif]-->
你的代码看起来像这样
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table bgcolor="#ffffff" width="600" border="0" cellpadding="0" cellspacing="0"
align="center" class="normal" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;">
<tr>
<td background="http://i.imgur.com/YJOX1PC.png" style="background-image:url('http://i.imgur.com/YJOX1PC.png');" bgcolor="#7bceeb" width="600" height="700" valign="top">
<!--[if gte mso 9]>
<v:rect strokecolor='none' style='width:600px;height:700px;'>
<v:fill color='#363636' src='http://i.imgur.com/YJOX1PC.png' type='tile'></v:fill>
</v:rect>
<v:shape id='NameHere' style='position:absolute;width:600px;height:700px;'></v:shape>
<![endif]-->
<div><table width="580" border="0" cellpadding="0"
cellspacing="0" align="center" class=
"spaced2" >
<tr>
<td valign="top" style="border:none;"><table class="aligntable" border="0" cellpadding=
"0" cellspacing="0" align="left"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr>
<td height="20"> </td></tr>
<tr>
<td width="180" align="center"><img border="0" src=
"" width="180" height="180" /></td>
</tr>
<tr>
<td width="180" valign="middle" align="center"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;">
<center>
TEST
</center></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
<tr>
<td width="180" height="255" valign="top"
align="left" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td>
</tr>
<tr>
<td align="center" valign="top" width="180"><img src=
""
border="0"
/></a></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
</table>
<table width="20" align="left" border="0">
<tr>
<td></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="aligntable2" border="0" cellpadding=
"0" cellspacing="0" align="left"
style=
"display:block; mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr>
<tr>
<td width="180" align="center"> <img border="0" src=
"" width="180" height="180" /></td>
</tr>
<tr>
<td width="180" valign="middle" align="center"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;">
<center>
TEST
</center></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
<tr>
<td width="180" height="255" valign="top"
align="left" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;"> TEST</td>
</tr>
<tr>
<td align="center" width="180"><a target="_blank" style=
"FONT-SIZE: 16px; COLOR: #0e5fd8; -webkit-text-size-adjust:none; FONT-FAMILY: Verdana, Arial; text-decoration:none; line-height:16px;"
href=
"http://www.philips.at/c-p/NTRX100_12/?origin=3_at_de_spoilyourself2__ot_dec__hero_img&elqtrack=true"> <img src=
""
border="0" /></a></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="aligntable3" border="0" cellpadding=
"0" cellspacing="0" align="right"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr>
<tr>
<td width="180" align="center"><img border="0" src=
"" width="180" height="180" /></td>
</tr>
<tr>
<td width="180" valign="middle" align="center"
style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;">
<center>
TEST
</center></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
<tr>
<td width="180" height="255" valign="top"
align="left" style=
"mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td>
</tr>
<tr>
<td align="center" width="180"> <img src=
"" alt=
width="50"
border="0"/></a></td>
</tr>
<tr>
<td height="20" width="180"></td>
</tr>
</table></td>
</tr>
</table>
<!--END TD -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
关于background - VML 后台代码中断对齐 Outlook 电子邮件表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27253019/