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

-1

在Gmail中查看包含图像的电子邮件时，嵌入式样式最初会正确加载。不过，如果您点击“在下面显示图片”链接打开图片，这会导致Gmail使用不同的类名称和ID前缀来重新呈现电子邮件标记。如何解决Gmail CSS图像显示错误？

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

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

我目前使用mailchimp传递图像，但我没有访问该图像元素的代码（只是合并标签|图像|）当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

来源

2017-08-01 tdenk94

欢迎堆栈溢出。我们可以在发送前后看到图像的代码吗？如果它的合并标签是通过你的列表，或者它是条件语句还是其他东西？ – Syfer

，这是代码在发送之前被发送。它正在经历我的列表，所以它会在数据库中使用正确的图像填充图像标签。我将编辑我的回答，以包含gmail对它的作用。 – tdenk94

尝试在媒体查询480px之前删除的空间。 Gmail对CSS支持非常恼人。我有一种感觉正在破坏它。使用下面的代码，看看它现在是否工作。

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

干杯

来源

2017-08-04 01:26:42 Syfer

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

回答

相关问题