我知道这是一直被问到的那种问题,但我已经遍历了我能找到的每一个答案,但没有什么能解决这个问题。问题是 outlook 2010 在表格单元格内的每个图像下方(或上方)添加了一个像素间隙。 (是低于还是高于取决于您使用的是 valign="top" 还是 valign="bottom")。设置显示:块;似乎没有帮助。
如果您在 Windows 7 上的 Outlook 2010 中查看此示例,您会在 Google 徽标下方看到一条红线。我所做的一切都不会删除这条线。
<table width="275" height="95" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bgcolor="red">
<tr>
<td width="275" height="95" align="left" valign="bottom" style="font-size:0; line-height: 0; border-collapse: collapse;">
<img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block; vertical-align: top;"></td>
</tr>
</table>
我得出的结论是无法删除该行。有人想证明我错了吗?
请试试这个并恢复
<img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block;" align="top">
试试看!
<!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 width="275" height="95" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bgcolor="red;">
<tr>
<td width="275" height="95" align="left" valign="bottom" style="font-size:0; line-height: 0; border-collapse: collapse;"><img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block; vertical-align: top;"></td>
</tr>
</table>
</body>
</html>
即使我遇到了同样的问题,但我通过在 div 和 p 标签中插入图像并覆盖由邮件客户端生成的外部 css 解决了这个问题。
<td colspan="3">
<div class="override" style="height: 201px !important;">
<p style="height: 201px !important; ">
<img src="images/path" width="800" height="201" alt="">
</p>
</div>
</td>
<style type="text/css">
p {margin-bottom: 0;}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
line-height: 0%;
}
p, .override{
font-size:0pt ;
line-height:0px;
}
</style>
希望这对任何人都有帮助。一切顺利..
嘿,我知道这是一个旧线程,但我刚刚遇到了这个问题,实际上设法以一种奇怪的方式解决了它。在我的例子中,我的图像下方出现了一个 1 像素的间隙。我从表格结构中删除了图像,然后将 html 高度设置为比图像的实际高度小一个像素。下面是我在电子邮件中使用的确切代码(图像 src 编辑)。
</table>
<img src='http://img1.jpg' height='400' width='552' alt='' border='0' style='display:block;align:bottom;border:none;margin:0;padding:0;height:401px;' />
<table border='0' style='padding:0;margin:0;border-collapse:collapse;' cellpadding="0" cellspacing="0">
这以某种方式修复了它。我不确定是否真的有必要从表结构中删除图像。
一个技巧对我有用:将 align="absbottom texttop " 添加到 img 和 line-height:10px(或更小)到包裹图像的 td
删除
align="left"
(或"right"
)。
像这样将 align="left" 添加到图像标签本身:
<img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" align="left" style="display: block; vertical-align: top;" >