html - 如何在 html 电子邮件中的 Outlook 2007、2010、2013 上使用“不显示”

Question

我正在尝试获取一些内容，使其在桌面上不显示，而在移动版本中显示。它在大多数电子邮件客户端中工作正常，但 Windows 设备上的 Outlook 07、10、13 给我带来了问题

                <tr class="mobileshow yahoohide hideit" align="center">
                    <th>
                        <table border="0" cellpadding="0" cellspacing="0" align="center"  >
                            <tr>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                               <a href="https://itunes.apple.com/us/app/meijer/id583093664?mt=8">
                                                   <img src="AppStore.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch hideit"/>
                                                </a>
                                            </td>
                                        </tr>

                                    </table>
                                </th>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0"  >
                                        <tr>
                                                <img src="space.gif" width="10" />
                                        </tr>
                                    </table>
                                </th>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0"  >
                                         <tr>
                                            <td>
                                               <a href="https://play.google.com/store/apps/details?id=com.meijer.mobile.meijer&hl=en">          
                                                   <img src="googlePlay.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch"/>
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </th>
                            </tr>
                        </table>    
                        <table border="0" cellpadding="0" cellspacing="0" >
                            <tr>
                                <th>
                                    <table style="line-height:30px !important;" border="0" cellpadding="0" cellspacing="0"  >
                                            <tr>
                                                    <img src="space.gif" width="50" />
                                            </tr>
                                    </table>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0" >
                                        <tr>
                                            <td>
                                                    <img src="meijer.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch"/>
                                            </td>
                                        </tr>
                                    </table>
                                </th>
                                <th>
                                    <table style="line-height:30px !important;" border="0" cellpadding="0" cellspacing="0"  >
                                            <tr>
                                                    <img src="space.gif" width="50" />
                                            </tr>
                                    </table>
                                </th>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0"  >
                                        <tr>
                                            <td>
                                                <img src="MPerksLogo.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch"/>
                                            </td>
                                        </tr>
                                    </table>
                                </th>
                            </tr>
                        </table>
                    </th>
                </tr>

我尝试过使用

<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">
  MOBILE CONTENT
</div>

但是这个方法不起作用，我也尝试应用 mso-hide:all 并直接内联样式显示 none 。

不知道我还能做什么。

Answer 1

为了隐藏 Outlook 中的所有内容，您需要在我看到的每个项目上都设置 mso-hide:all，例如，如果您在 div， table 上必须有 mso-hide:all。

<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">
<table style="display:none;mso-hide:all;">[row and data]</table></div>

希望上面的例子有帮助