GMail忽略「display：none」

Question

我有一個查詢，gmail忽略了「display：none」 - 該怎麼辦？在電子郵件HTML隱藏arow或div

Answer 1

如果style =「display：none」在gmail中不起作用，請將style =「display：none！important;」 它在gmail中有效。

Answer 2

完全從您的源代碼中刪除元素。

電子郵件客戶端對一些CSS規則非常嚴格。另外，看到電子郵件裏面沒有JavaScript可以執行，display: none無論如何都沒有功能，是嗎？

Answer 3

已經有人說display:none !important;的作品，但是沒有人說過這個用例，所以當我在SO上發現這個問題和解決方案時，我會給出一個。

我正在用plain/text和html創建一個多部分的電子郵件。在源代碼中，html是從模板文件生成的，而純文本是通過從完整電子郵件中剝離標籤創建的。

若要在純文本中包含未在html中顯示的其他文本，最簡單的方法是將其包裝在<div style="display:none !important>中，當生成純文本時將剝離該文本。舉例來說，如果這是你的模板：

<p>This is part of an html message template.</p> 
<div style="display:none !important">=================================</div> 
<div style="border-top:3px solid black;margin-top:1em;"> 
    <p>This is some footer text below a black line</p> 
</div> 

的HTML將呈現爲預期（沒有一堆='S）和純文本的所有div的剝離將是：

This is part of an html message template. 
========================================= 
This is some footer text below a black line. 

Answer 4

使用display:none !important;解決了Gmail的問題，但Outlook 2007和2010忽略了這個問題。使用display:none; display:none !important; 瞭解了這一點。這樣gmail使用一個版本，Outlook 2007和2010使用另一個版本。

Answer 5

對於那些到達與此類似的問題與Gmail和移動/桌面電子郵件開發有關的問題 - 如果您使用媒體查詢和顯示/隱藏內容，嵌入式CSS將無法覆蓋inline！重要聲明。相反，你可以使用溢出：隱藏，像這樣：

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

在嵌入式媒體查詢你自然就會取消這些樣式揭示DIV，然後隱藏內容的桌面版本。

@media only screen and (max-width: 480px) { 
.mobile { 
    display : block !important; 
    width : auto !important; 
    overflow : visible !important; 
    float : none !important; 
} 
.desktop { 
    display : none !important; 
} 
} 

不幸的是，height屬性在Gmail中無法正常工作，否則這將是一個更好的解決方案，因爲這造成可見的內容等於div的高度低於空白的部分。

Answer 6

感謝您對我的幫助。

嘗試使用Gmail的最大高度，這個應該選擇它。然後使用max-height：inherit！important;在CSS這應該刪除的間距問題：

<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;"> 

@media only screen and (max-width: 480px) { 
.mobile { 
display:block !important; 
margin: 0; 
padding:0; 
overflow : visible !important; 
width:auto !important; 
max-height:inherit !important; 
} 
} 

Answer 7

雖然這已經回答了我想我要湊錢了一個解決方案，真正的情況下，任何人都爲我工作在未來有這個問題。這是上述答案和我在網上找到的其他內容的組合。

我遇到的問題是Gmail和Outlook。根據OP，我所擁有的移動內容不會隱藏在Gmail（資源管理器，Firefox和Chrome）或Outlook（2007,2010 & 2013）中。我通過使用下面的代碼解決了這個問題。

這裏是我的移動內容：

<!--[if !mso 9]><!--> 
<tr> 
    <td style="padding-bottom:20px;" id="mobile"> 
    <div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;"> 
    <table cellspacing="0" cellpadding="0" border="0"> 
    <tr> 
     <td> 
    <img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" /> 
      </td> 
    </tr> 
    <tr> 
      <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td> 
    </tr> 
    <tr> 
     <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info. 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" /> 
      </td> 
    </tr>        
    </table> 
    </div> 
    </td> 
</tr> 
<!--<![endif]--> 

而這裏的CSS：

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */ 
*[id=mobile] { 
    width:300px!important; 
    height:auto!important; 
    display:block!important; 
    overflow:visible!important; 
    line-height:100%!important; 
    } 
*[id=gmail] { 
    display:block!important; 
    width:auto!important; 
    overflow:visible!important; 
    float:none !important; 
    height:inherit!important; 
    max-height:inherit!important; 
    } 

修復的Outlook

所以你可以從HTML代碼中看到，包裝全部這些標籤中的內容;

<!--[if !mso 9]><!--> <!--<![endif]-->，

隱藏對於我提到的Outlook版本的內容。對於所有其他電子郵件客戶端，display:none;工作得很好。我還看到，您也可以使用mso-hide:all來隱藏Outlook的內容，但我認爲這比將內聯代碼放置起來要容易一些。

修復的Gmail

現在的Gmail，你可以看到，我創建了一個「特別」 id稱爲gmail我那麼<td>內應用到一個div。我嘗試了其他方法使用其他方法，如overflow:hidden內聯和所有其他組合的方式，但這是爲我工作。

因此，在短期，包裹在<div>在<td>內容，然後包含overflow:hidden,width:0等然後通過這個DIV的id，在我的情況gmail覆蓋這些樣式解決了這個問題對我來說。

無論如何，也許有人會在未來發現這有幫助！

Answer 8

爲了隱藏HTML電子郵件中的元素並使其在Gmail中工作，您需要將其清零並調整CSS中的大小（Gmail將忽略）。

像這樣：

<style> 
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] { 
     display : block !important; 
     width : auto !important; 
     max-height: inherit !important; 
     overflow : visible !important; 
     float : none !important; 
    } 
</style> 

<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<!--[if !mso]><!--> 
    <td style="width: 0; max-height: 0; overflow: hidden; float: left;"> 
    </td> 
</tr> 
<!--<![endif]--> 
</table> 

此外，增加的條件註釋涵蓋了你的Outlook 07.

Answer 9

如果您遇到的問題與Gmail的數目爲三個規定的修復工作對我來說也是如此。我使用了一種類似的方法，使用div標籤和覆蓋行，然後在頭文件標籤中定義一個CSS樣式，該標籤專用於gmail。任何時候，我想從Outlook桌面隱藏一些東西，我會做以下事情：if！mso。見下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 

    <style type="text/css"> 
    So my code looks like this: 
    @media screen and (max-width : 480px) { div[id=gmail] {display:block!important; 
     width:100%!important; 
     overflow:visible!important; 
     float:none !important; 
     height:inherit!important; 
     max-height:inherit!important;} 
    } 
    </style> 
    <title></title> 
    </head> 
    <body> 

<!--And the in the i have the following setting inline--> 
<table> 
<tr> 
<td> 
<div id="gmail" style= 
"display:none;width:0;overflow:hidden;float:left;max-height:0;"> 
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#E9E9E8" 
align="center"><![if !mso]> 
<tr> 
<td valign="top"> 
<table width="133" bgcolor="#FFFFFF" style= 
"border: 1px solid #c6c6c5;" cellpadding="0" cellspacing="0"> 
<!--My content--></table> 
</td> 
</tr> 
<![endif]></table> 
</div> 
</td> 
<!--This worked for me in Android 4.2 /4.1 /apple iOS 
desktop web based: gmail, yahoo, Aol, Outlook.com in IE/FF and Chrome 
desktop: outlook 2010--></tr> 
</table> 
</body> 
</html> 

Answer 10

我有一種情況，我只是有幾句話。我用font-size：0px ;.

<div style="font-size:0px">foo bar</div>

它爲我工作。

Answer 11

建立在丹S.，我經常使用的另一個例子。

@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) { 
    p[class="hidden"] { /* I use this format to get past Yahoo Mail */ 
    display: block !important; 
    visibility: visible !important; 
    max-height: none !important; 
    } 
} 

<td> 
    <p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p> 
</td> 

Answer 12

非常高興，我想與大家分享這個消息，Gmail現在支持「顯示：無」通過EmailMonks上測試CSS屬性。但是你需要在使用'display：none'的時候使用CSS來應用一個類，以便不被內嵌工具修改。

你可以閱讀更多here