它在gmail,hotmail vb中看起来很好,但我无法解决Outlook中的空间问题。它只在图像之间显示1px的空白,而只是垂直显示。任何帮助将不胜感激,谢谢。
这是我的代码。
<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 width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td>
<table border="0" cellspacing="0" cellpadding="0" style="width: 700px; border-spacing: 0px; font-family: Arial; margin: 0 auto; display: block; border-collapse: collapse">
<tr>
<td>
<img src="1.jpg" alt="mail" />
</td>
<td>
<img src="2.jpg" alt="mail" />
</td>
<td>
<img src="3.jpg" alt="mail" />
</td>
</tr>
<tr>
<td>
<img src="4.jpg" alt="mail" />
</td>
<td>
<a href="#">
<img src="5.jpg" alt="mail" /></a>
</td>
<td>
<img src="6.jpg" alt="mail" />
</td>
</tr>
<tr>
<td>
<img src="7.jpg" alt="mail" />
</td>
<td>
<img src="8.jpg" alt="mail" />
</td>
<td>
<img src="9.jpg" alt="mail" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:5)
我首先尝试将display: block;
添加到图像中作为内联样式,并且对于表格添加border-collapse: collapse;
也作为内联样式。
如果这不能解析空格,那么有一些技术专门适用于Outlook,您应该尝试下一步。有关于使用Email on Acid.
上的Outlook表修复额外空间问题的非常深入的文章您可能还想尝试在td标记内使用更多嵌套表。
答案 1 :(得分:2)
我多次遇到过这个问题。虽然简单修复。 在保持图像的tds上应用字体大小和行高。它将删除空间。使用小于图像高度的字体大小和行高。
显示:块也非常重要。绝对需要。