css - 隐藏表格而不显示：Gmail 电子邮件无

Question

我正在处理产品电子邮件，它在 gmail 中看起来很糟糕。

我的代码：

<tr id="PART1">
  <td  align="left">
    <table class="deviceWidth">
       <tr>
         <td colspan="2"  align="left">
            <img src="logo.gif" style="display:block" border="0"/>
         </td>
         <td id="TdIwantToHide" class="displayAction">Lorem ipsum</td>
      </tr>
     </table>
  </td>
</tr>

<tr id="PART2" class="deviceBlock">
   <td>
       <table class="deviceWidth">
          <tr>
            <td>Lorem ipsum</td>
          </tr>
       </table>
   </td>
</tr>

CSS: .displayAction { display:block!important; } .deviceBlock { 显示：无！重要；}

我还测试了移除显示器并将其更改为

line-height:0px;
font-size:0px;
height:0px;
margin:0;
padding:0;

因为我在一些网站上看到了这个修复，人们说让它工作但它不起作用。我可以看到两者

有人知道怎么做吗？

Answer 1

您无法有效地隐藏Gmail 中的元素，但可以将其归零。

诀窍是利用 Gmail 和其他电子邮件客户端之间的差异。区别在于 Gmail 不会读取或呈现除内联样式之外的任何样式。<style></style>任何写在标签中的 CSS都将被忽略。

这仅适用于 Gmail，因此我们可以通过将我们希望隐藏的元素的内联样式设置为零值来利用这种差异，并在<style></style>块中为元素设置适当的值，以便除 Gmail 之外的所有客户端将适当地渲染元素。

<style>
*[class=mobile] {
    display:none;
}

@media only screen and (max-width:600px) { 
    *[class=mobile] {
        display:block !important;
        width:auto !important;
        max-height:inherit !important;
        overflow:visible !important;
        float:none !important;
    }

    *[class="block"] {
        display:block !important;
        padding:5px;
    }
}
</style>

<!--[if !mso]><!-->
<table border=0 cellpadding=0 cellspacing=0>
    <tr>
        <td class="mobile" style="width:0;max-height:0;overflow: hidden;">
            <img src="http://www.placehold.it/150x150" alt="" border=0 width="100%" style="display:block;" />
        </td>
    </tr>
</table>
<!--<![endif]-->

下面示例中添加的mso代码是为了增加对 Outlook 的支持。

Answer 2

啊，问题是，gmail 会删除电子邮件中的任何样式标签，这就是为什么所有 html 电子邮件都需要内联完成大部分样式。

您是否希望仅在 gmail 或所有桌面客户端上隐藏内容？据我所知，没有办法有条件地定位 gmail。

（回复下面的评论：）

然后您需要设置<td id="TdIwantToHide" class="displayAction" style="display:none;">，然后在您的媒体查询@media only screen and (max-width: 640px) { td[id="TdIwantToHide"] { display:block !important; } }中使用您的样式标签再次显示它。

Answer 3

尝试同时使用 'visibility: hidden' 和 'display: none'

    'line-height:0px;
     font-size:0px;
      height:0px;
      margin:0;
      padding:0;'

Answer 4

您将需要使用display:none; display:none !important;.

Gmail 中的display:none !important;作品。display:none;负责 Outlook 。

Answer 5