Gmail 忽略 display:none

Question

我想要做的是让两个 table 可见或不可见，具体取决于您正在查看的设备。这是我的媒体查询：

@media only screen and (max-width: 480px) {
.hidedesktop {
   display:table !important; 
   overflow:visible !important; 
   line-height:100% !important; 
   visibility:visible !important;}

.hide { 
   display:none !important; 
   width:0px !important;
}

我的第一个 table 工作正常，但我的第二个 table 没有隐藏在桌面上

<table class="hide">
  <tbody>
    <tr>
      <td> Show this on desktop. Hide on mobile.

      </td>
    </tr>
  </tbody>
</table>

<table class="hidedesktop" style="overflow:hidden; display:none; line-height:0px; max-height:0px; visibility: hidden;">
  <tbody>
    <tr>
      <td> Hide on desktop. Show on mobile </td>
    </tr>
  </tbody>
</table>

有人解决这个问题吗？据我所知，这只是 gmail 中的一个问题，但我担心其他电子邮件客户端也会遇到这个问题。

Answer 1

遗憾的是，媒体查询在 Gmail 或 Gmail 应用程序中不起作用。您必须选择默认显示哪一个，它也会显示在 Gmail 和 Gmail 应用程序中。

Answer 2

因此，在进一步查看来自 J.Crew 的一封电子邮件后，我试图复制以进行练习，我找到了解决方案。

.hide {display:none !important; width:0px !important;}

.showme {display:table !important;
    width:100% !important;
    overflow:visible !important;
    float:none !important;
    max-height:inherit !important;
    line-height:auto !important;
    margin-top:0px !important;
    visibility:inherit !important;}

.mobilenav {
    width:100% !important;
    margin: 0 auto !important;}

我发现将我的 table 和其他一些 CSS 规则一起包装在父 div 中就可以了！

<table class="hide">
  <tbody>
    <tr>
      <td> Show this on desktop. Hide on mobile.</td>
    </tr>
  </tbody>
</table>

<div class="showme" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; line-height:0px; visibility:hidden;">
<table class="mobilenav showme" width="100%" style="display:none;">
  <tbody>
    <tr>
      <td> Hide on desktop. Show on mobile </td>
    </tr>
  </tbody>
</table>
</div>

虽然它可以在 gmail 桌面上运行，但我无法让移动 table 在 gmail 应用程序中显示。但是，只显示顶部 table（就像我在桌面上查看一样），所以它对我来说非常完美。

这也经过了试金石测试！

Gmail 忽略 display:none

Gmail ignoring display:none

css

email

gmail

html-email

display