时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时
Posted
技术标签:
【中文标题】时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时【英文标题】：Newsletter can't hide responsive content on gmail and when I try to forward the e-mail 【发布时间】：2016-09-08 01:16:16 【问题描述】：我正在尝试撰写时事通讯，但在 GMail 上进行测试时无法隐藏响应式内容。 在 Outlook 和 Yahoo 上一切正常，但如果我尝试转发电子邮件，隐藏的内容是可见的。
我测试过：
putsmail > 我用它在 Outlook、Yahoo 和 GMail 上发送测试 1. Yahoo > 看起来不错，但是当我尝试转发电子邮件时，隐藏的内容是可见的； 2。 Outlook > 看起来不错，但是当我尝试转发电子邮件时，隐藏的内容是可见的； 3。 GMail > 可见的隐藏内容。
mailchimp > 这对我来说只能在 Outlook 上进行测试，而且看起来不错（它隐藏了响应内容），但是当我尝试转发电子邮件时隐藏的内容不再隐藏。
这是我的代码（）的一部分：
<table align="center" style="width:80%;margin-left:10%;margin-right:10%;/*border: 1px solid #FF69B4;*/">
<tbody>
<tr>
<td align="center" style="padding: 0 10%; width: 100%;">
<span class="vizualizati-aici-normal" style="font-family: Arial;font-size: 12px;color:#666;">
<a href="#" style="color:#666;">click here</a>.
</span>
<span class="vizualizati-aici-tableta" style="font-family: Arial;font-size: 11px;color:#666; display: none;visibility: hidden;height: 0;overflow: hidden;">
<a href="#" style="color:#666;">click here</a>.
</span>
<span class="vizualizati-aici-mobil" style="font-family: Arial;font-size: 10px;color:#666; display: none;visibility: hidden;height: 0;overflow: hidden;">
<a href="#" style="color:#666;">click here</a>.
</span>
</td>
</tr>
<tr>
<td align="center" style="padding: 0 10%; width: 100%;" class="header-hr-newsletter">
<h1 style="font-family: 'EB Garamond', serif;font-size: 80px;font-weight: 400;color:#000;padding:0;margin:0;">
Newsletter
</h1>
<h2 style="font-family: 'EB Garamond', serif;font-size: 60px;font-weight: 400;color:#000;padding:20px 0;margin:0;display: none;visibility: hidden;height: 0;overflow: hidden;">
Newsletter
</h2>
<h3 style="font-family: 'EB Garamond', serif;font-size: 40px;font-weight: 400;color:#000;padding:20px 0;margin:0;display: none;visibility: hidden;height: 0;overflow: hidden;">
Newsletter
</h3>
</td>
</tr>
<tr>
<td align="center" style="width:100%;background-color: #cc66ff;width: 100%; padding: 0 10%;" class="header-with-number-and-logo">
<table style="margin:0;padding:0; width:100%; padding:10px 5px;">
<tbody>
<tr>
<td style="width:50%;color:#FFF;text-align: left;padding-right: 10%;font-family: Arial;">
<span class="nr-revista-normal" style="font-size: 25px;">Nr.: x, yy zzz</span>
<span class="nr-revista-tableta" style="font-size: 18px;display: none;visibility: hidden;height: 0;overflow: hidden;">Nr.: x, yy zzz</span>
<span class="nr-revista-mobil" style="font-size: 13px;display: none;visibility: hidden;height: 0;overflow: hidden;">Nr.: x, yy zzz</span>
</td>
<td align="right" style="width:50%;padding-left: 10%;">
<span class="header-normal-screen-logo" style="color: #FFF;font-size: 25px;">
Some Logo
</span>
<span class="header-tablet-logo" style="display: none;visibility: hidden;height: 0;overflow: hidden;color:#FFF;font-size: 18px;">
Some Logo
</span>
<span class="header-mobil-logo" style="display: none;visibility: hidden;height: 0;overflow: hidden;color:#FFF;font-size: 18px;">
Some Logo
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
@media only screen and (max-width: 768px) and (min-width: 479px)
body
/*background-color: #FFFF45;*/
/* click here */
.vizualizati-aici-normal
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.vizualizati-aici-tableta
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
/*newsletter title*/
.header-hr-newsletter h1
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.header-hr-newsletter h2
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
/*number*/
.nr-revista-normal
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.nr-revista-tableta
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
/*logo*/
.header-normal-screen-logo
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.header-tablet-logo
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
@media only screen and (max-width: 480px)
body
/*background-color: #00EE33;*/
/* click here */
.vizualizati-aici-normal
display: none!important;
height: none!important;
visibility: hidden!important;
overflow: hidden!important;
.vizualizati-aici-tableta
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.vizualizati-aici-mobil
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
/*newsletter title*/
.header-hr-newsletter h1
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.header-hr-newsletter h2
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.header-hr-newsletter h3
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
/*number*/
.nr-revista-normal
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.nr-revista-tableta
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.nr-revista-mobil
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
/*logo*/
.header-normal-screen-logo
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.header-tablet-logo
display: none!important;
height: 0!important;
visibility: hidden!important;
overflow: hidden!important;
.header-mobil-logo
display: block!important;
height: auto!important;
visibility: visible!important;
overflow: visible!important;
</style>
我被卡住了，不知道该怎么办...... 任何想法都欢迎。 谢谢！
【问题讨论】：
【参考方案1】：不幸的是，GMail 还不支持媒体查询，也不支持display、overflow 或visibility 属性。
更多信息请参见Campaign Monitor's CSS Support Guide for Email Clients。
除了重写您的时事通讯以使其完全流畅，而不是试图使其具有响应性，恐怕这里没有真正的解决方案。
【讨论】：
但我有：显示：无；可见性：隐藏；高度：0；溢出：隐藏； > inline :( .... 它应该隐藏该内容 ... 不？ GMail 也不支持display、visibility 或 overflow 属性。我已经更新了我的答案以包含它。以上是关于时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时的主要内容，如果未能解决你的问题，请参考以下文章
Hotmail 和 Gmail 中的时事通讯 html 表中的行之间的间距