订阅者电子邮件：GMail正在将高度转换为最小高度 [英] Subscriber email: GMail is converting height to min-height

问题描述

当向Google用户传送电子邮件时，这是一个看似已知的问题：Google将任何高度声明更改为最小高度。这意味着堆叠的图像不再间接地触摸。

This is a seemingly known issue when delivering email to Google users: Google changes any "height" declarations to "min-height". This means that images that are stacked no longer "touch" each other without a gap.

有没有人知道一个很好的工作？

Does anyone know of a good work around?

这里有一个例子：

<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中显示如下：

Appears as the following in 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>

所以，而不是这样：

< img src =https://i.stack.imgur.com/dpyuc.pngalt =在此输入图像说明>

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

Two images stacked on each other look like this in GMail:

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

There must be a simple workaround?

推荐答案

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

默认情况下，图像是内嵌块，并与文本基准。这意味着如果要将任何文本放在旁边，图像的底部与x的底部排列，而不是y的底部。这个下降的保留空间是导致您的图像之间的空间。

By default, images are inline blocks and are aligned to the baseline of text. This means that if you were to put any text next to them, the bottom of the image lines up with the bottom of the "x", not the bottom of the "y". The "reserved space" for this descender is what's causing the space between your images.

上面提到的任何一个属性声明都将阻止图像与文本基线，都以不同的方式。

Any one of the property declarations I mentioned above will stop the image from aligning it with the text baseline, all in different ways.

这篇关于订阅者电子邮件：GMail正在将高度转换为最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！