如何在 html 电子邮件中在 Outlook 2007、2010、2013 上使用 display none答案

【问题标题】：How to use display none on outlook 2007, 2010, 2013 in html email如何在 html 电子邮件中在 Outlook 2007、2010、2013 上使用 display none
【发布时间】：2018-06-23 11:56:03
【问题描述】：

我正在尝试获取一些内容以在桌面版中不显示而在移动版中显示。它在大多数电子邮件客户端中运行良好，但 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 内联样式。

不知道我还能做什么。

【问题讨论】：

标签： html email html-table outlook html-email

【解决方案1】：

为了让您在 Outlook 中隐藏所有内容，您需要在我看到的每个项目上都有 mso-hide:all，例如，如果您在 div 中有一个表格，它必须有 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>

希望上面的例子有所帮助

【讨论】：

我就是这样做的。
但是他已经尝试过mso-hide，为什么对他不起作用？
@Black 内部任何需要 mso-hide 的元素。我在上面的评论中写道。