Question

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

我已经在所有网络客户端和我测试过的移动设备上工作，但Outlook会显示文件中的所有图片。

我尝试过 display：none; ，可见性的组合;图像，tds，表格中隐藏和 width =“0”，并尝试使用div。

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

非常感谢任何帮助，

感谢。

沙龙

Answer 1

感谢您的回复，我现在设法解决了这个问题。我觉得马特说的是对的;我的问题与内联样式有关。

Answer 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;
}

然后图像有一个类，其中bazookas的所有内容都为0，以确保它真的被隐藏。对于基于桌面的电子邮件客户端，从不会看到表格单元格的背景图像，然后由内嵌图像

覆盖

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

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

2 个答案: