我正在尝试撰写时事通讯,但在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>
我被卡住了,不知道该怎么办......欢迎任何想法。谢谢!