时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时

Question

我正在尝试撰写时事通讯，但在 GMail 上测试时无法隐藏响应内容。在 Outlook 和 Yahoo 上一切正常，但如果我尝试转发电子邮件，则隐藏的内容可见。

我测试使用：

putsmail > 我用它在 Outlook、Yahoo 和 [=25 上发送测试=]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>

我卡住了，不知道该怎么办... 欢迎任何想法。谢谢！

Answer 1

这里的坏消息是，不幸的是，GMail 尚不支持媒体查询，也不支持 display、overflow 或 visibility 属性。

有关详细信息，请参阅 Campaign Monitor's CSS Support Guide for Email Clients。

除了重写您的时事通讯使其完全流畅，而不是尝试使其具有响应性，恐怕这里没有真正的解决方案。

时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时

Newsletter can't hide responsive content on gmail and when I try to forward the e-mail

html

css

gmail

newsletter

email-forwarding