订阅者电子邮件：GMail将高度转换为最小高度

Question

向Google用户发送电子邮件时，这是一个看似已知的问题：Google会将任何“身高”声明更改为“min-height”。这意味着堆叠的图像不再没有间隙地相互“接触”。

有没有人知道好的工作？

以下是一个例子：

<div style="height:244px">
    <img src="http://www.domain.com/images/top.gif" alt="" />
</div>
<div style="height:266px">
    <img src="http://www.domain.com/images/bottom.gif" alt="" />
</div>

在GMail中显示如下：

<div style="min-height:244px">
    <img src="http://www.domain.com/images/top.gif" alt="" />
</div>
<div style="min-height:266px">
    <img src="http://www.domain.com/images/bottom.gif" alt="" />
</div>

所以不要这样：

彼此堆叠的两个图像在GMail中看起来像这样：

必须有一个简单的解决方法吗？

Answer 1

我刚遇到这个问题并通过设置max-height解决了这个问题。它不会搞乱。

Answer 2

在图片上添加vertical-align: top，display: block或float: left。

默认情况下，图像是内联块，并与baseline of text对齐。这意味着如果您要在它们旁边放置任何文本，图像的底部会与“x”的底部对齐，而不是“y”的底部。这个下降器的“预留空间”是导致图像之间空间的原因。

我上面提到的任何一个属性声明都会阻止图像与文本基线对齐，所有这些都以不同的方式进行。

Answer 3

我注意到GMail不会干扰<td height="...">属性设置。如果您可以轻松地将有问题的元素分配到表中，那么这可能是一种解决方法。

Answer 4

尝试使用line-height！

Answer 5

我有DIV标签，我强行要显示：table-cell

我通过在“单元格”中添加1px宽的间隔图像来解决这个问题，其中高度属性（不是css样式）设置为我想要单元格的高度。这不是理想的，但完成了工作，是跨浏览器/电子邮件客户端。