【问题标题】：Prevent thunderbird from magnifying image and use it as a link防止雷鸟放大图像并将其用作链接
【发布时间】：2020-04-12 01:48:27
【问题描述】：

我们想通过 Laravel 后端发送一封电子邮件，其中包含一个包含在 a 标签中的图像，但是 Thunderbird 在悬停时使用放大工具而不是能够点击图像.

在源码中是这样的：

<a href=3D"https://test.com/register?invite_id=3D57" style=3D"display: block; padding: 0; margin: 0; width: 100%;">
    <img src=3D"cid:993a9f6af8eed0e1c7cc4e6ae6422f8f@test.com" alt=3D"" style=3D"display: block; width: 100%;">
</a/>

在邮件模板中：

<a href="https://test.com/register?invite_id={{$inviteId}}" style="display: block; padding: 0; margin: 0; width: calc(100%);">
    <img src="https://test.com/public/images/invitation-small.jpg" alt="" style="display: block; width: calc(100%); object-fit: contain;" overflowing="false" shrinktofit="true">
</a>

我什至添加了 overflowing="false" 和 shrinktofit="true" 属性，但 Thunderbird 会覆盖它们，然后使用其默认的 css。

有解决办法吗？

【问题讨论】：

您是否尝试将 !important 添加到每个正在更改的 CSS 属性中，例如width:calc(100%)!important?我认为它会忽略您的 overflowing 和 shrinktofit 属性，因为它们是非标准的。请考虑使用 overflow 和 width:fit-content CSS 属性。
– 如果您提供一些反馈，我可以将以上内容转化为答案。
@AdamKatz 明天要试试这个，当然我们也在试验 !important 标志。另一方面，width:fit-content 似乎是一个有趣的解决方案，但考虑到邮件软件 html 和 css 的严格程度，我不确定它是否也能工作。如果它确实有效，您可以将您的评论转换为答案，我会接受它:)
我进行了一些测试，但仍然出现同样的问题：当您单击图像时，Thunderbird 会尝试放大图像，而不是将用户带到链接的位置。

标签： html email thunderbird

【解决方案1】：

试试这个：

我推荐 Adam Katz 解决方案并检查是否适用。

在您的样式中使用 !important。

请注意，“3D” 是“=”字符的十六进制值。

此“3D”将出现在 Gmail 中，但电子邮件会正确呈现。它会显示在 Outlook 中。

请在尝试此解决方案后分享您的结果，以便进一步帮助您。

【讨论】：

= 是Quoted-Printable 编码中的转义字符。 =\n（等于换行符）是无操作的 QP 转义（用于包装以适应 RFC 822 而不会影响内容）。所有其他转义符都是两个十六进制字符，例如=3D 转义一个裸露的=。