Gmail无法识别垂直对齐或垂直对齐

Question

我正在制作一个电子邮件模板。我想在heroImage.jpg下面画一条线。该行不能成为heroImage.jpg的一部分，因为电子邮件中还有其他几行，而且它们都应该看起来相同。

我这样做的方法是，在放置heroImage.jpg的表行上设置边框底。

我的问题是，在GMAIL中（例如，在发送电子邮件时，但在OUTLOOK中却没有），我在heroImage.jpg和我的行之间得到了一条细线。我认为这是因为GMAIL无法识别valign或Vertical-align，因此heroImage.jpg居于顶部（可能是默认选项），因此#heroImageBlock的颜色可见。

但是应该怎么做，heroImage.jpg将在我的行的底部和右下方对齐（它们之间没有烦人的空格）。

是否有一种方法可以强制GMAIL识别垂直对齐或垂直对齐并摆脱烦人的空间？

HTML

<tr>
    <td align="center" valign="bottom" id="heroImageContainer">
        <table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">                                      
            <tr class="border-bottom">
                <td>
                    <img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
                </td>
           </tr>
       </table>
    </td>
</tr>

CSS

#heroImageBlock td{vertical-align:bottom;}

我也尝试将垂直对齐方式分配给所有其他元素（请参见下文），但是它不起作用。

#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}

在OUTLOOK图片中，红线很好地组合在一起，应该是这样：

在GMAIL中，图像和红线之间有一条令人讨厌的灰线。

Answer 1

垂直对齐/垂直对齐不是您的问题。由于您是专门设置块图像的，因此您不需要垂直对齐任何内容。这指出了与声明图像的方式有关的另一个问题，但我会尽快解决。

仅供参考，最好是给我们更多的范围或更多的代码。您正在引用border-bottom类，但是我们看不到呈现该边框的属性。图像上的id也是一样。如果在头部的类或ID上设置了任何属性，则最好包括这些属性以帮助我们进行调试。

以下是我建议的改进，以尝试解决此问题。
 1.不要在表行上设置任何属性或类。它们不是为此设计的。移动边框可能会解决此问题，但是即使不能解决问题，也应在表格和表格单元格中添加这些内容。在这种情况下，请将border-bottom类声明移至该行下方的表格单元格。

 2.您是否尝试过设置display：block;在图像上？默认情况下，图像将被声明为内联，并且您必须专门将其设置为块。内联时，间距可能会出现在图像下方，并且在尝试达到像素完美效果或将内容直接对齐下方时会将间距和尺寸扔掉。

让我知道这些进展如何。

Answer 2

尝试将以下样式添加到父元素： font-size：0px和line-height：0px。 默认情况下，Gmail倾向于添加自己的间距。以上应将其删除。