Outlook中的电子邮件中的双重图像

时间:2014-01-14 14:32:44

标签: html css email

我正在做一封响应式电子邮件,如果在移动设备上查看电子邮件,我可以移动图片。除了Outlook之外,一切看起来都很棒。它在两个地方都显示出来。我读到outlook无法识别“display:none”代码。还有什么可以做的吗?

以下是我的代码看起来像以及除了outlook之外的所有内容。

媒体查询代码

     @media only screen and (max-device-width: 479px) {
                #mobile {display:block}
                #desktop {display:none;mso-hide: all;}


        }

@media only screen and (min-device-width: 480px) {
                #mobile {display:none;mso-hide: all;}
                #desktop {display:block}

}
        }

这是我正在使用的HTML。

  <table id="mobile" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="top" align="right" class="hisrc">
                                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;">
                                    <img src="vna-logo.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px;" class="deviceWidth" />  


                                </td>
                            </tr>
                        </table>

 <table id="desktop" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="top" align="right" class="hisrc">
                                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;">
                                    <img src="vna-logo-2.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px;" class="deviceWidth" />  


                                </td>
                            </tr>
                        </table>

1 个答案:

答案 0 :(得分:0)

<table id="mobile" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="display:none;">

默认情况下应隐藏移动版本,将隐藏在不接受查询的客户端