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

发布于 2024-11-24 03:49:02 字数 885 浏览 3 评论 0原文

在向 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:

enter image description here

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

enter image description here

There must be a simple workaround?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

话少心凉 2024-12-01 03:49:02

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

I just ran into this issue and solved it by setting max-height which it doesn't mess with.

年少掌心 2024-12-01 03:49:02

在图像上添加 vertical-align: topdisplay: blockfloat: left

默认情况下,图像是内联块,并与文本基线对齐。这意味着,如果您要在它们旁边放置任何文本,图像的底部将与“x”的底部对齐,而不是“y”的底部对齐。该下降部分的“保留空间”是导致图像之间存在空间的原因。

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

Add vertical-align: top, display: block or float: left on 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.

挽梦忆笙歌 2024-12-01 03:49:02

我注意到 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.

我的奇迹 2024-12-01 03:49:02

尝试使用行高代替!

Try using line-height instead!

望喜 2024-12-01 03:49:02

我有 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文