2

I need to have Mozilla Firefox specific overflow: hidden property so that it should apply only in Firefox.

Fiddle with issue

Below is the sample code for issue demonstration;

    <div class="container">
    <div class="hidmeinfirefox">I should be hidden in firefox</div>
</div>

    .container {

}
.container .hidmeinfirefox {
    height: 1px;
    width: 1px;
    -moz-overflow: hidden;
}
Aamir Shahzad
  • 6,683
  • 8
  • 47
  • 70
  • 1
    I don't recall there's such thing as `-moz-overflow`. Why not simply `overflow: hidden`? – haim770 Apr 29 '15 at 10:28
  • This is an XY problem. Why do you need it only for firefox? – PeeHaa Apr 29 '15 at 10:31
  • possible duplicate of [Hide an html element using javascript only if browser is firefox](http://stackoverflow.com/questions/2454611/hide-an-html-element-using-javascript-only-if-browser-is-firefox) – Bram Vanroy Apr 29 '15 at 10:32
  • 1
    There are dropdown having buttons which are overflowing in firefox only – Aamir Shahzad Apr 29 '15 at 10:38
  • 1
    @BramVanroy I don't think this question is a duplicate, this is after a CSS method, the linked question was asking for a way to do it with JavaScript. – Hidden Hobbes Apr 29 '15 at 10:51

2 Answers2

3

pure CSS solution :

@-moz-document url-prefix() {
  .container .hidmeinfirefox {
    overflow: hidden;
  }
}
.container .hidmeinfirefox {
    height: 1px;
    width: 1px;
}

https://jsfiddle.net/r4y9c8b6/5/

Luckyn
  • 563
  • 1
  • 4
  • 21
3

Use this code

<style type="text/css">
@-moz-document url-prefix() {
    .hidmeinfirefox {
        overflow: hidden;
    }
}
</style>
majorhavoc
  • 2,385
  • 1
  • 24
  • 26