订阅者电子邮件：GMail 正在将高度转换为最小高度
在向 Google 用户发送电子邮件时，这是一个看似已知的问题：Google 将所有“高度”声明更改为“最小高度”。这意味着堆叠的图像不再没有间隙地相互“接触”。
有谁知道有什么好的解决办法吗？
下面是一个示例：
<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 中看起来像这样：
一定有一个简单的解决方法吗？
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?
Here's an example:
<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>
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>
So instead of this:
Two images stacked on each other look like this in GMail:
There must be a simple workaround?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我刚刚遇到了这个问题，并通过设置 max-height 来解决它，它不会造成混乱。
I just ran into this issue and solved it by setting
max-heightwhich it doesn't mess with.在图像上添加
vertical-align: top、display: block或float: left。默认情况下，图像是内联块，并与文本基线对齐。这意味着，如果您要在它们旁边放置任何文本，图像的底部将与“x”的底部对齐，而不是“y”的底部对齐。该下降部分的“保留空间”是导致图像之间存在空间的原因。
我上面提到的任何一个属性声明都会以不同的方式阻止图像与文本基线对齐。
Add
vertical-align: top,display: blockorfloat: lefton the image.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 不会干扰
属性设置。因此，如果您可以轻松地将有问题的元素分配到表中，这可能是一种解决方法。I notice GMail does not interfere with a
<td height="...">attribute setting. So that might be a work-around if you can easily assign the problematic element into a table.尝试使用行高代替！
Try using line-height instead!
我有 DIV 标签，我强制显示：table-cell
我通过在“单元格”中添加一个 1px 宽的间隔图像来解决这个问题，并将高度属性（不是 css 样式）设置为我想要单元格的高度。这并不理想，但完成了工作，并且是跨浏览器/电子邮件客户端。
I had DIV tags that I was forcing to be display:table-cell
I resolved this by adding a 1px wide spacer image into the "cell" with a height attribute (not css style) set to the height I wanted the cell to be. This isn't ideal but got the job done and is cross-browser/email client.