Gmail está ignorando “Display: Nenhum”

Question

Tenho uma consulta de que o Gmail está ignorando "Display: Nenhum" - o que fazer? Em e -mail HTML para Hide Arow ou Div

Answer 1

Se Style = "Display: Nenhum" não funciona no gmail, put style = "display: Nenhum! IMPORTANTE;" E funciona no Gmail.

Answer 2

Para aqueles que chegam aqui com um problema semelhante relacionado ao desenvolvimento de e -mails para celular/desktop no Gmail - se você estiver usando consultas de mídia e mostrando/ocultando conteúdo, o CSS incorporado não poderá substituir a declaração importante! Em vez disso, você pode usar o excesso: oculto, assim:

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

Nas suas consultas de mídia incorporadas, você desfazerá naturalmente esses estilos para revelar a div e depois ocultar a versão da área de trabalho do conteúdo.

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

Infelizmente, a propriedade de altura não funciona no Gmail, caso contrário, seria uma solução melhor, uma vez que isso cria uma seção de espaço em branco abaixo do conteúdo visível igual à altura da div.

Answer 3

Embora isso já tenha sido respondido, eu apenas pensei em entrar com uma solução que realmente funcionou para mim, caso alguém tenha esse problema no futuro. É realmente uma combinação das respostas acima e outra coisa que encontrei online.

A questão que eu estava tendo era para Gmail e Outlook. De acordo com o OP, o conteúdo móvel que eu não havia escondido no Gmail (Explorer, Firefox e Chrome) ou Outlook (2007.2010 e 2013). Eu resolvi isso usando o código a seguir.

Aqui está meu conteúdo móvel:

<!--[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]-->

E aqui estão o 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;
  }

Correções para o Outlook

Assim, como você pode ver no código HTML acima, envolvendo todo o conteúdo nessas tags;

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

esconde o conteúdo das versões do Outlook que eu mencionei. Para todos os outros clientes de e -mail, o display:none; Funciona muito bem. Eu também vi que você também pode usar mso-hide:all Esconder as coisas para o Outlook, mas achei que isso era um pouco mais fácil do que colocar esse código em linha.

Correções para o Gmail

Agora, para o Gmail, você pode ver que eu criei um 'especial' id chamado gmail que eu então apliquei a uma div dentro do <td>. Eu tentei inúmeros outros métodos de usar coisas como overflow:hidden Em linha e todos os tipos de outras combinações, mas foi isso que funcionou para mim.

Então, em suma, envolver o conteúdo no <td> em um <div> que então contém o overflow:hidden,width:0 etc, então substituindo esses estilos, dando ao div e id de, no meu caso gmail resolveu o problema para mim.

De qualquer forma, talvez alguém ache isso útil no futuro!

Answer 4

Usando display:none !important; Resolve o problema com o Gmail, mas é então ignorado pelo Outlook 2007 e 2010. Round isso usando display:none; display:none !important;Dessa forma, o Gmail usa uma versão e o Outlook 2007 e 2010 usam a outra.

Answer 5

Já foi dito display:none !important; Funciona, mas ninguém declarou um caso de uso para isso, então eu vou dar um trabalhando quando encontrei essa pergunta e solução sobre isso.

Eu estava criando um email de várias partes com simples/texto e html. Na fonte, o HTML é gerado a partir de arquivos de modelo e o texto simples é criado a partir de tags de remoção do e-mail completo.

Para incluir texto adicional no texto simples que não é mostrado no HTML, a maneira mais fácil é embrulhá-lo em um <div style="display:none !important> Isso será retirado quando o texto simples for gerado. Por exemplo, se este é o seu modelo:

<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>

O HTML renderizará como esperado (nenhum grupo de = s) e o texto simples com todos os divididos será: será:

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

Answer 6

Remova completamente o elemento do seu código -fonte.

Os clientes de e-mail são muito rígidos sobre algumas regras do CSS. Além disso, ver como nenhum javascript pode ser executado dentro do e-mail, um display: none Não tem função lá de qualquer maneira, não é?

Answer 7

Obrigado por isso, muito útil para mim.

Experimente o máximo para o Gmail, isso deve buscá-lo. Em seguida, use Max-Hight: Herit! IMPORTANTE; No CSS, isso deve remover o problema de espaçamento:

<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 8

Para ocultar um elemento em um email HTML e fazer com que ele funcione no Gmail, você precisa zerá -lo e ajustar o dimensionamento no seu CSS (que o Gmail ignorará).

Igual a:

<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>

Além disso, o comentário condicional adicionado cobre você para o Outlook 07.

Answer 9

Eu tenho uma situação em que tive algumas palavras. Eu usei o tamanho da fonte: 0px;.

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

Funcionou para mim.

Answer 10

Construindo em Dan S., outro exemplo que eu uso com frequência.

@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 11

Com grande prazer, gostaria de compartilhar esta notícia com todos que o Gmail agora suporta 'Display: Nenhum' Propriedade CSS em testes por EmailMonks. Mas você precisa aplicar uma classe com CSS enquanto estiver usando 'exibição: nenhum', inomera para ser intocado pela ferramenta inline.

Você pode ler mais aqui

Answer 12

Se você está enfrentando problemas com o Gmail, a correção declarou -se que o número três também funcionou para mim. Apliquei uma abordagem semelhante usando tags div e substitui na linha e, em seguida, definindo um estilo CSS na tag de cabeça específica para o Gmail. Sempre que eu quiser esconder algo da área de trabalho do Outlook, faço o seguinte: se! Mso. Veja o exemplo abaixo:

    <!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>