【发布时间】：2015-07-20 23:09:05
【问题描述】：
我正在编写邮件页脚（签名），除了 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"/>
<title>Mail footer</title>
<style type="text/css">
body{margin: 0; font-size: 13px; font-family: Calibri, sans-serif;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
@media only screen and (max-width: 700px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
}
@media only screen and (max-width: 700px) {
.footer table{width: 25% !important;}
}
@media only screen and (max-width: 700px) {
.logo { border: none !important; }
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="logo">
<table cellpadding="0" cellspacing="0" align="left" width="550">
<tr>
<td valign="top">
<div style="font-size: 15px; font-weight: 600;"><b>Xxxxx xxxx</b></br></div>
<div style="font-size: 13px;">
<font color="#008AC9">Managing Director</font></br></br>
</div>
</td>
</tr>
<!-- white space -->
<!--tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr-->
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="24%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td class="logo" valign="top" style="font-size: 0; line-height: 0; padding: 1px 8px 0 8px; border-right: 1px solid #485465;" height="55" align="left">
<a href="#"><img src="Logo" alt="logo" height="40" width="90"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="7%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td valign="top">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="34%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td valign="top">
<div style="font-size: 12px; color: #666666;">
Xxxxxx xxxxx<br />
Xxxxxxx x x xxxx<br />
Xxxxxxx xxxxxxxxx<br />
Xxxxxx
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="34%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td valign="top">
<div style="font-size: 12px; color: #666666;">
<a href="" style="color:#666666; text-decoration:none;"><span style="color:#666666; text-decoration:none;">Direct: XXXXXXXX<br /></span></a>
<a href="" style="color:#666666; text-decoration:none;">Office: XXXXXXXX<br /></span></a>
<a href="mailto:xxx@xxx" style="color:#666666; text-decoration:none;">XXXX@XXXX.com<br /></span></a>
www.XXXXXX.com
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- LOGAAAAAAAAAAAAAAA ############################ -->
<tr><td valign="top" style="font-size: 0; line-height: 0;" height="3" > </td></tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="63.5%">
<tr>
<td valign="top" class="logo" style="line-height: 0; padding: 1px 8px 0 8px;" height="15px" align="left">
</td>
</tr>
</table>
<table class="footer" border="0" cellpadding="0" cellspacing="0" align="left" width="30%">
<tr>
<td valign="top" class="logo" style=" padding: 1px 0px 0 8px;" height="15px" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
<a href="#"><img src="Test" alt="Facebook" height="8px" width="8px"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
<a href="#"><img src="Test2" alt="Linkedin" height="8px" width="8px"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
</td>
<a href="#"><img src="Test3" alt="Twitter" height="8px" width="8px"></a>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
<a href="#"><img src="Test4" alt="Google Plus" height="8px" width="8px"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="6.5%">
<tr>
<td valign="top" class="logo" style=" line-height: 0; padding: 1px 8px 0 8px;" height="15px" align="left">
</td>
</tr>
</table>
</td>
</tr>
<tr><td valign="top" style="font-size: 0; line-height: 0;" height="10" width="550"> </td></tr>
<tr><td valign="top" style="border-bottom: dotted 1px #bbbbbb; font-size: 0; line-height: 0;" height="1"> </td></tr>
<tr style="text-align: justify;">
<td valign="top">
<div style="font-size: 10px; color: #909090;">
</br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</td>
</tr>
<tr><td valign="top" style="font-size: 0; line-height: 0;" height="10" > </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
-
outlook 使用 word 的 html 渲染代理，您可能应该认为它相当于 Internet Explorer 版本 0.000000000001cocktail napkin。这完全是废话。
-
加入表格 style="border-collapse: collapse;"
标签： html css email outlook html-email