电子报不能在gmail上隐藏响应内容，当我尝试转发电子邮件时 [英] Newsletter can't hide responsive content on gmail and when I try to forward the e-mail
本文介绍了电子报不能在gmail上隐藏响应内容，当我尝试转发电子邮件时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试撰写简报，但是当我在 GMail 上测试时，我无法隐藏自适应内容。
在 Outlook 和 Yahoo 一切正常，但如果我尝试转发电子邮件隐藏的内容是可见的。
我测试使用：
-
putsmail >我使用此功能在 Outlook ， Yahoo 和 GMail
$ b上发送测试$ b 1。 Yahoo >看起来确定，但是当我尝试转发电子邮件时，隐藏的内容可见;
2。 Outlook >看起来确定，但是当我尝试转发电子邮件时隐藏的内容是可见的;
3。 GMail >隐藏的内容可见。
-
mailchimp >这适用于我只在 Outlook 进行测试，它看起来确定（它隐藏响应内容），但当我尝试
这是我的代码（）的一部分：
< table align =centerstyle =width：80％; margin-left：10％; margin-right ：10％; / * border：1px solid＃FF69B4; * />
< tbody>
< tr>
< td align =centerstyle =padding：0 10％; width：100％;>
< span class =vizualizati-aici-normalstyle =font-family：Arial; font-size：12px; color：＃666;>
< a href =＃style =color：＃666;>点击此处< / a> ;.
< / span>
< span class =vizualizati-aici-tabletastyle =font-family：Arial; font-size：11px; color：＃666; display：none; visibility：hidden; height： hidden;>
< a href =＃style =color：＃666;>点击此处< / a> ;.
< / span>
< span class =vizualizati-aici-mobilstyle =font-family：Arial; font-size：10px; color：＃666; display：none; visibility：hidden; height： hidden;>
< a href =＃style =color：＃666;>点击此处< / a> ;.
< / span>
< / td>
< / tr>
< tr>
< td align =centerstyle =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 =centerstyle =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-normalstyle =font-size：25px;> Nr .: x，yy zzz< / span>
< span class =nr-revista-tabletastyle =font-size：18px; display：none; visibility：hidden; height：0; overflow：hidden;> Nr .: x，yy zzz< / span>
< span class =nr-revista-mobilstyle =font-size：13px; display：none; visibility：hidden; height：0; overflow：hidden;> Nr .: x，yy zzz< / span>
< / td>
< td align =rightstyle =width：50％; padding-left：10％;>
< span class =header-normal-screen-logostyle =color：#FFF; font-size：25px;>
一些标志
< / span>
< span class =header-tablet-logostyle =display：none; visibility：hidden; height：0; overflow：hidden; color：#FFF; font-size：18px;
一些标志
< / span>
< span class =header-mobil-logostyle =display：none; visibility：hidden; height：0; overflow：hidden; color：#FFF; font-size：18px;
一些标志
< / 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; * /
}
/ *点击这里* /
.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; * /
}
/ *点击这里* /
.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>
我被困，不知道该怎么办...
任何想法欢迎。
谢谢！
解决方案
这里的坏消息是，不幸的是，Gmail不支持媒体查询它支持显示，溢出或可见性属性。 / p>
请参阅 Campaign Monitor的电子邮件客户端CSS支持指南更多信息。
除了重写你的通讯是完全流畅的，而不是试图使其响应，恐怕没有真正的解决方案，在这里。
I am trying to write a newsletter but I am having trouble hiding the responsive contents when I test on GMail. On Outlook and Yahoo everything is ok, but if I try to forward the e-mail the hidden contents are visible.
I tested using :
putsmail > I use this to send test on Outlook, Yahoo and GMail
1 . Yahoo > looks ok, but when I try to forward the e-mail the hidden content it's visible;
2. Outlook > looks ok, but when I try to forward the e-mail the hidden content it's visible;
3. GMail > the hidden content it's visible.mailchimp > this works for me to make tests only on Outlook and it looks ok (it hides the responsive content), but when I try to forward the e-mail the hidden contents are not hidden anymore.
This is a part of my code () :
<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>
I am stuck, don't know what to do ... Any idea it's welcome. Thank you!
解决方案
The bad news here is that, unfortunately, GMail does not yet support media queries nor does it support the display, overflow or visibility properties.
See Campaign Monitor's CSS Support Guide for Email Clients for more information.
Other than rewriting your newsletter to be completely fluid, rather than trying to make it responsive, I'm afraid there's no real solution to be had here.
这篇关于电子报不能在gmail上隐藏响应内容，当我尝试转发电子邮件时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
