Gmail 无法识别 valign 或 vertical-align

Question

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

我这样做的方法是，我将边框底部设置为放置 heroImage.jpg 的表格行。

我的问题是在 GMAIL 中（例如，当电子邮件发送时，但不是在 OUTLOOK 中）我在 heroImage.jpg 和我的行之间有一条细长的空间。我认为这是因为 GMAIL 无法识别 valign 或 vertical-align，因此 heroImage.jpg 顶部对齐（可能是默认选项），因此 #heroImageBlock 的颜色可见。

但是应该如何将 heroImage.jpg 对齐底部和正下方，这将是我的线（中间没有烦人的空间）。

有没有办法强制 GMAIL 识别 valign 或 vertical-align 并摆脱那个烦人的空间？

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

Valign/垂直对齐不是你的问题。由于您专门设置块图像，因此您不应该有任何垂直对齐的东西。这指出了与您声明图像的方式有关的另一个问题，但我很快就会解决这个问题。

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

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

2.你有没有试过设置display:block；在图像上？默认情况下，图像将被声明为内联，您必须专门将其设置为块。内联时，间距可能会出现在图像下方，并且在尝试像素完美时会抛出间距和尺寸，或者在您的情况下直接在下方对齐内容。

让我知道这些进展如何。

Answer 2

尝试将这些样式添加到父元素： 字体大小：0px 和行高：0px。 默认情况下，Gmail 倾向于添加自己的间距。以上应该删除它。