在 html 中显示标签不适用于 html 电子邮件模板答案

【问题标题】：display tag in html not working for the html email template在 html 中显示标签不适用于 html 电子邮件模板
【发布时间】：2012-07-25 22:11:27
【问题描述】：

我正在为我的公司制作电子邮件模板。取决于它是移动设备还是浏览器，我正在尝试显示内容。

显示属性似乎不适用于 gmail，我无法在此处粘贴整个代码。这是我使用的媒体查询。

  @media only screen and (max-device-width: 380px) {
    .mobileWidth {
      width: 290px !important; 
    }

    img { 
    max-width: 130px !important;
    max-height: 130px !important;
    }   

    .right {
      width: 100% !important;         
      position: relative !important;
    }       

     .test {
       width: 290px !important;
       text-align: center !important;
     }

     .showMobile {
       display:inline !important;
     }

    .hideMobile {
      display: none;
    }           
  } 

<html>
  <body>
    <!-- this div block is intended to by default not show in the browser and show in the mobile -->
    <table>
      <tr>
        <td>
          <div class = "showMobile" style ="display:none;">
            <p> some text and image <p>
          </div>

          <!-- this div block is intended to be shown in the browser and not shown in the mobile -->

          <div class="hideMobile">
            <p> some other text and image </p>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

这在 iphone 邮件帐户中可以正常工作，但不适用于 gmail 浏览器和 iphone 的 gmail 应用程序。有什么指点吗？

【问题讨论】：

标签： html css gmail media-queries email-templates

【解决方案1】：

正确，display:none 将在 Gmail 中被删除。解决此问题的最佳方法是将内联样式设置为float:left, width:0px, height:0px, visibility:none, overflow:hidden。当您满足媒体查询的要求时，您会还原所有这些样式，因此您可以在媒体查询中设置float:none !important, overflow:visible !important, width:(actual width or 100%) !important, height:(same as width) !important

【讨论】：

【解决方案2】：

对于 HTML 电子邮件，建议您不要以自己的方式使用 css 样式。

您应该使用基于旧学校表格的布局和旧（但仍然有效）的 html 标签等。

CS 样式应保持在最低限度，并且仅用作内联样式。

【讨论】：

#Billy 我已将问题编辑为类似于原始 html 结构。
这很好，但是您仍然在其中使用 DIV，并且您仍然拥有所有 CSS。这是一篇关于 html 电子邮件的文章，非常值得一读：sitepoint.com/code-html-email-newsletters
我使用内联 CSS 而不是外部文件