Question

在Gmail中查看包含图片的电子邮件时，嵌入式样式最初会正确加载。但是，如果您点击“在下方显示图片”链接以启用图片，则会导致Gmail使用不同的类名和ID前缀重新呈现电子邮件标记。

问题是，电子邮件仍然使用以前版本的样式表进行样式设置，而不更新前缀以匹配当前标记。

这意味着依赖于类名或ID选择器的任何CSS规则将在图像打开时停止工作，只留下元素名称或通配符选择器。

我目前正在使用mailchimp传入图片，但我无法访问代码中的那个图片元素（只是合并标记| IMAGE |）当Gmail出现此问题时，我无法访问图像元素。知道怎么做到这一点吗？

<style>
.share-img img{
max-width: 60%;
margin-bottom: 5px;
}
@media screen and (max-width: 480px){
.share-img img{
    max-width: 90%;
    margin-bottom: 5px;
 }
}   
</style>
<div class="share-img" style="text-align: center; width: 100%;">*|IMAGE|*</div>

编辑：

以下是gmail如何使用唯一字符串预先添加类/ ID的示例。样式表'share-img'类和实际的'share-img'类在他们之前有2个不同的字符串，因此它没有正确调整图像大小。

gmail inspect element image

Answer 1

尝试删除媒体查询中480px之前的空格。 Gmail支持CSS非常烦人。我有一种打破它的感觉。使用以下代码，看看它是否现在有效。

@media screen and (max-width:480px){
.share-img img{
    max-width: 90%;
    margin-bottom: 5px;
 }
}

干杯

如何解决Gmail CSS图像显示错误？

1 个答案: