How to hide a div only in firefox

Question

Hello,

In what way is it possible to hide a <div> only in Firefox and display in other browsers?

Answer 1

According to Css Tricks, you could do something like that, considering your div with 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;
    }
}

---

And if you want it the other way around:

#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;
    }
}

Answer 2

Following the idea that the Sergio said:

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>