Question

我知道这是一直被问到的问题，但我已经找到了我能找到的每一个答案，但没有解决这个问题。问题是outlook 2010在表格单元格内的每个图像下方（或上方）增加了一个像素间隙。（无论是低于还是高于取决于你是否使用valign =＆＃34; top＆＃34;或valign =＆＃34; bottom＆＃34;）。设置显示：块;似乎没有帮助。

如果您在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>

我得出的结论是无法删除该行。有人在乎我的错吗？

Answer 1

请尝试此操作并还原

<img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block;" align="top">

Answer 2

试试这个 - 见！

<!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>

Answer 3

即使我遇到了同样的问题，但我通过在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>

希望这会对任何人有所帮助。一切顺利......

Answer 4

嘿，我知道这是一个老线程，但我遇到了这个问题，并且实际上设法以一种奇怪的方式解决它。在我的情况下，我的图像下面出现了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">

不知怎的，这解决了它。我不确定是否有必要从表结构中删除图像。

Answer 5

为我工作的一个技巧：添加align =“absbottom texttop”到img和 line-height：包裹图像的td的10px（或更小）

Answer 6

删除align="left"（或"right"）。

Outlook 2010中HTML电子邮件中的图像下的一个像素空间

6 个答案: