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 {display：none！important; }

我还测试删除显示并将其更改为

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

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

有人知道这样做的方法吗？

Answer 1

啊，问题是，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 2

尝试使用'visibility：hidden'和'display：none'以及

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

Answer 3

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

诀窍是利用Gmail和其他电子邮件客户端之间的差异。这种差异是因为Gmail不会读取或呈现除内联样式之外的任何样式。 <{1}}标记内写的任何CSS都将被忽略。

仅适用于Gmail的情况，因此我们可以通过将要隐藏的元素的内联样式设置为零值来利用这种差异，并在<style></style>块中为我们设置适当的值该元素使Gmail以外的所有客户端都能正确呈现元素。

<style></style>

以下示例中添加<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>  <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> 代码是为了增加对Outlook的支持。

Answer 4

您需要使用display:none; display:none !important;。

display:none !important;适用于Gmail。 display:none;处理Outlook。

Answer 5

如果值设置为“无”，则Gmail不支持内联显示属性 style=“display:none”
支持显示属性的每个其他值重要的是要注意，如果值设置为“none！important;”，则Gmail会支持内联显示属性，如下所示。
style=“display:none !important;”

为Gmail电子邮件隐藏没有显示的表格：none

5 个答案: