2

Olá,

De qual maneira é possível fazer esconder uma <div> apenas no Firefox e exibir em demais navegadores?

1
  • 1
    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    – Sergio
    1/07/2015 às 20:26

2 Respostas 2

4

Segundo Css Tricks, você poderia fazer algo assim, considerando seu div com id meuDiv:

/* Firefox 2 */
html>/**/body #meuDiv, x:-moz-any-link {
    display: none;
}

/* Firefox 3 */
html>/**/body #meuDiv, x:-moz-any-link, x:default {
    display: none;
}

/* Any Firefox */
@-moz-document url-prefix() { 
    #meuDiv {
        display: none;
    }
}

E, caso também queira o contrário:

#meuDiv {
    display: none;
}

/* Firefox 2 */
html>/**/body #meuDiv, x:-moz-any-link {
    display: block;
}

/* Firefox 3 */
html>/**/body #meuDiv, x:-moz-any-link, x:default {
    display: block;
}

/* Any Firefox */
@-moz-document url-prefix() { 
    #meuDiv {
        display: block;
    }
}
3
  • e para demostrar uma div apenas no firefox, como é feito?
    – the flash
    1/07/2015 às 20:48
  • @theflash Atualizei minha resposta. A ideia para mostrar a div apenas no firefox é deixar display: none por padrão e, depois, utilizando o seletor específico para o firefox, mudar para display: block.
    – falsarella
    1/07/2015 às 21:03
  • 1
    Esclareceu minha dúvida, obrigado.
    – the flash
    1/07/2015 às 21:41
1

Seguindo a ideia que o Sergio disse:

window.onload = function () {
   var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 
  
   if (is_firefox) {
      document.getElementById('divEspecifica').style.display = 'none';
   }
}
#divEspecifica {
  width: 50px;
  height: 50px;
  background-color: red;
}

#divTodos {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div id="divEspecifica">
</div>
<div id="divTodos">
</div>

1
  • Obrigado Maicon!
    – the flash
    1/07/2015 às 20:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .