Email 在Office 365的html电子邮件中隐藏内容

Email 在Office 365的html电子邮件中隐藏内容,email,responsive-design,outlook,html-email,office365,Email,Responsive Design,Outlook,Html Email,Office365,我无法在Office 365中隐藏电子邮件中仅移动部分的内容。我已经将这些内容隐藏在其他电子邮件客户端中,包括Gmail和Outlook 2007和2013。是否有Office 365的解决方案 以下是我一直使用的模板示例: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { wi

我无法在Office 365中隐藏电子邮件中仅移动部分的内容。我已经将这些内容隐藏在其他电子邮件客户端中,包括Gmail和Outlook 2007和2013。是否有Office 365的解决方案

以下是我一直使用的模板示例:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

    body {
    width:100% !important;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    margin:0;
    padding:0;
    }
    img {
        outline:none;
        text-decoration:none;
        -ms-interpolation-mode:bicubic;
    }
    table {
        border-collapse:collapse;
    }
    table td {
        border-collapse:collapse;
        mso-table-lspace:0pt;
        mso-table-rspace:0pt;
        padding:0;
    }
    .yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
        color:#000;
        text-decoration:none !important;
        border-bottom:none !important;
        background:none !important;
    }
    .ReadMsgBody {
        width:100%;
    }
    .ExternalClass {
        width:100%;
    }

    /* END OF GLOBAL RESETS */
    @media only screen and (max-device-width: 500px), screen and (max-width: 500px) {
    /* START OF MOBILE GRID */ 

    *[class=hide] {
        display:none !important;
    }
    *[class].block {
        width:400px!important;
        display:block!important;
        clear:both!important;
    }
    *[class=showmobile] {
        display:block !important;
        margin:auto !important;
        width:400px!important;
        height:auto !important;
        max-height:inherit !important;
        overflow:visible !important;
    }
    }
    span.yshortcuts {
        color:#000;
        background-color:none;
        border:none;
    }
    span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {
        color:#000;
        background-color:none;
        border:none;
    }
    [class].contenteditable {
        -webkit-user-select: text !important;
        -khtml-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        -o-user-select: auto !important;
        user-select: auto !important;
    }
    </style>
    </head>
    <body bgcolor="#ffffff" margin="0" style="-webkit-font-smoothing:antialiased; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none;">

    <!--Wrapper-->
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td width="100%" valign="top" bgcolor="#ffffff"><!--content-->

          <table width="750" cellpadding="0" cellspacing="0" class="hide" align="center">
            <tbody>
              <tr>
                <td width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;" alt=""/></td>
                <td bgcolor="#ffffff"  width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;" alt=""/></td>
                <td width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" alt="" width="235" border="0" style="display:block;"/></td>
              </tr>
            </tbody>
          </table>

          <!--content end--> 

          <!--  mobile only content -->

          <div  height="0" style="display:none; width:0px; max-height:0px; overflow:hidden;" class="showmobile">
            <table height="0"  width="235" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" class="showmobile" style="margin:0 auto; display:none; border:0;">
              <tr>
                <td class="showmobile block" align="left"><table width="235" border="0" align="center" cellpadding="0" cellspacing="0" class="showmobile" style="margin:0 auto; display:none;" bgcolor="#ffffff">
                    <tr>
                      <td><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;padding-top:10px;padding-bottom:10px;" alt=""/></td>
                    </tr>
                    <tr>
                      <td width="100%" align="center"  style="padding: 8px; line-height: 12px;background-color:#ed008c;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff;"> To unsubscribe, click here</a>. </span></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
          </div>

          <!-- end mobile only content --></td>
      </tr>
    </table>
    <!--End Wrapper-->

</body>

身体{
宽度:100%!重要;
-webkit文本大小调整:100%;
-ms文本大小调整:100%;
保证金:0;
填充:0;
}
img{
大纲:无;
文字装饰:无;
-ms插值方式:双三次插值;
}
桌子{
边界塌陷:塌陷;
}
表td{
边界塌陷:塌陷;
mso表空间:0pt;
mso表rspace:0pt;
填充:0;
}
.yshortcuts、.yshortcuts a、.yshortcuts a:链接、.yshortcuts a:访问、.yshortcuts a:悬停、.yshortcuts a:跨距{
颜色:#000;
文字装饰:无!重要;
边框底部:无!重要;
背景:无!重要;
}
.ReadMsgBody{
宽度:100%;
}
.外部类{
宽度:100%;
}
/*全球重置结束*/
@仅介质屏幕和(最大设备宽度:500px)、屏幕和(最大宽度:500px){
/*启动移动网格*/
*[类=隐藏]{
显示:无!重要;
}
*[类].块{
宽度:400px!重要;
显示:块!重要;
清楚:两者都有!很重要;
}
*[class=showmobile]{
显示:块!重要;
保证金:自动!重要;
宽度:400px!重要;
高度:自动!重要;
最大高度:继承!重要;
溢出:可见!重要;
}
}
span.yshortcuts{
颜色:#000;
背景色:无;
边界:无;
}
span.yshortcuts:悬停,span.yshortcuts:活动,span.yshortcuts:聚焦{
颜色:#000;
背景色:无;
边界:无;
}
[class]。内容可编辑{
-webkit用户选择:文本!重要;
-khtml用户选择:自动!重要;
-moz用户选择:自动!重要;
-ms用户选择:自动!重要;
-用户选择:自动!重要;
用户选择:自动!重要;
}
要取消订阅,请单击此处。

在花了几天时间试图想出一个解决方案之后,我能想到的最好办法就是在包含“font size:0px;”的单元格中添加一个内联样式。在媒体查询中,我只需将字体大小设置回所需的大小。

尽管我们都认为这是不可能的,但微软已经开发了一款新的电子邮件应用程序,它比以前的版本更糟糕。请阅读并接受这一事实,我们几乎没有什么可以做的。