试图在 html 电子邮件中隐藏图像 - 在 Outlook 2010 中不起作用

Posted 2023-03-05

【中文标题】试图在 html 电子邮件中隐藏图像 - 在 Outlook 2010 中不起作用

【英文标题】：Trying to hide images in html email - not working in Outlook 2010

【发布时间】：2012-07-31 11:11:40

【问题描述】：

我正在为移动设备构建设备响应式电子邮件。作为其中的一部分，我希望将一些出现在桌面/网络邮件上的图像隐藏在移动设备上，反之亦然。

我可以在我测试过的所有网络客户端和移动设备上使用它，但 Outlook 会显示文件中的所有图像。

我尝试了 display:none;、visibility; 的组合。在图像、tds、表格上隐藏和，并尝试使用div。

我知道使用背景图片有一种解决方法，但这并不理想，因为有些图片充当按钮并且需要它们后面的链接。

不胜感激，

谢谢。

莎朗

【问题讨论】：

无法为您解决。但我发现了这个资源：msdn.microsoft.com/en-us/library/aa338201.aspx 奇怪的注意：“显示”在支持和不支持的 CSS 属性列表中

就 bg 图像的解决方法而言，Outlook 2007/2010/2013 不支持 bg 图像（除了 body 标签，即使那样它也不能与其他浏览器一致地缩放）。

问题可能不在于特定 CSS 样式在 Outlook 中是否有效，而在于您如何尝试应用它（外部样式表、内部样式表和内联样式）以及它是否在媒体查询中。显示如何应用 CSS 的相关代码会很有帮助。请记住，Outlook 2007 及更高版本使用 Word 的渲染引擎而不是 IE 来渲染电子邮件，因此在 Web 浏览器中有效的大部分内容在 Outlook 中无效。

感谢您的回复，我现在已经设法解决了。我认为马特说的是对的。我的问题与内联样式有关。

而且，作为一个注释 - 我使用了以前在 Outlook 中工作的 div 上的背景图像，只是在获取链接到它后面工作时遇到了问题。但更喜欢使用“真实”图像，现在已经解决了......关于浮动问题......

【参考方案1】：

感谢您的回复，我现在已经设法修复它。我认为马特说的是对的。我的问题与内联样式有关。

【参考方案2】：

我遇到了同样的问题，我想要两张不同尺寸的图片，并希望它们都可以作为链接点击。

我的媒体查询仅针对移动设备，因此我可以定义包含表格单元格的高度并确保链接是设置的块高度。

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)       
td[class="image-class"], 
a[class="image-link-class"]
height:165px!important; 
display: block; !important;
img[class="desktop-content"]
display: none !important; 
height:0 !important; 
min-height: 0 !important; 
max-height: 0 !important; width:0 !important; overflow: hidden !important;

然后图像有一个类，将火箭筒的所有内容都设置为 0，以确保它确实是隐藏的。对于基于桌面的电子邮件客户端，表格单元格的背景图像永远不会被看到，然后被内联图像覆盖

<td  background="image-mobile.jpg" class="image-class"><a href="#" class="image-link-class"><img src="image-desktop.jpg"   border="0"  style="display:block" class="desktop-content"></a></td>