如何在html电子邮件中使用Outlook 2007,2010,2013上的显示无

How to use display none on outlook 2007, 2010, 2013 in html email

提问人:jdip88 提问时间:1/15/2018 更新时间:11/21/2023 访问量:10598

问:

我正在尝试获取一些内容以在桌面上不显示任何内容并在移动版本中显示。它在大多数电子邮件客户端中运行良好,但是 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 和 display none。

不知道我还能做什么。

表格 outlook html 电子邮件

评论


答:

5赞 Syfer 1/15/2018 #1

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

希望上面的例子对您有所帮助

评论

0赞 scoopzilla 1/17/2018
我就是这样做的。
0赞 Black 4/7/2021
但是他已经尝试过mso-hide,为什么它对他不起作用?
1赞 Syfer 4/9/2021
@Black 里面的任何元素也需要有 mso-hide。我在上面的评论中写了。
0赞 Pramod 11/17/2023 #2

我发现了一个技巧,可以在Outlook Desktop的reply / fwd上隐藏文本,方法是将文本和背景颜色设置为相同。到目前为止,我无法看到回复和转发的文本。但是,我用来添加隐藏的文本。不确定如果使用 table 或 ,未测试会有什么影响<div><p>