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

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

.共享img img{
最大宽度：60%；
边缘底部：5px；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.共享img img{
最大宽度：90%；
边缘底部：5px；
}
}   
*|形象|*

编辑：

下面是一个gmail如何使用唯一字符串在类/ID前面加前缀的示例。样式表“share img”类和实际的“share img”类前面有两个不同的字符串，因此无法正确调整图像的大小

---

尝试删除媒体查询中

480px

之前的空格。Gmail非常讨厌CSS支持。我有一种感觉，它正在打破它。使用下面的代码，看看它现在是否工作

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

---

干杯

尝试删除媒体查询中

480px

之前的空格。Gmail非常讨厌CSS支持。我有一种感觉，它正在打破它。使用下面的代码，看看它现在是否工作

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

---

干杯

欢迎来到Stack Overflow。我们有没有可能在图像发送前后看到代码？如果它的合并标签是通过你的列表还是条件语句或其他什么？那么这就是在发送代码之前发送的代码。它正在浏览我的列表，因此它在数据库中用正确的图像填充图像标记。我将编辑我的答案，以包括gmail对它做了什么。欢迎来到Stack Overflow。我们有没有可能在图像发送前后看到代码？如果它的合并标签是通过你的列表还是条件语句或其他什么？那么这就是在发送代码之前发送的代码。它正在浏览我的列表，因此它在数据库中用正确的图像填充图像标记。我将编辑我的答案，包括gmail对它的作用。