订阅者电子邮件：GMail正在将height转换为min-height [英] 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 =输入图片说明here>

两张图片堆叠在一起看起来像这样在GMail：

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

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

There must be a simple workaround?

推荐答案

code> vertical-align：top ， display：block 或 float：left 。

Add vertical-align: top, display: block or float: left on the image.

默认情况下，图片是内嵌块，并且与文字基线。这意味着如果你要在它们旁边放置任何文本，图像的底部与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正在将height转换为min-height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！