Q:

Div's inside of button element not showing up in firefox

I have a little mobile nav button to reveal the navigation on small screens. The kids are calling it "hamburger" these days. It's been working great for me, but just noticed it is not showing up in firefox. It should be a "button" since it triggers some javaScript. I figured, if I made the button display: block; I could put divs within. Is this not the case?
HTML
<button class="mobile-nav-button">

  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>

</button> <!-- mobile-nav-button -->

CSS
.mobile-nav-button {
  display: inline-block;
  border: 0; outline: 0;
  background: transparent;
  width: 10em;
  height: 10em;
}

  .bar {
    width: 100%;
    float: left;
    height: 22%;
    margin-bottom: 17%;
    background-color: #f06;
  }

  .bar:last-of-type {
    margin-bottom: 0;
  }

A:

Instead of using div elements try replacing them with span. The button element is an inline type and the div element is block type, because of that some browsers will not interpret this kind of structure correctly. 

EDIT:

try this:
.mobile-nav-button {
  position: relative;
    display: inline-block;
  border: 0; outline: 0;
 /* background: transparent;*/
  width: $m-button-size;
  height: $m-button-size;
  .bar {
    display: inline-block;
    width: 100%;
    float: left;
    height: 2.7em;
    margin-bottom: 2em;
    background: #f06;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

EDIT2:

Ok my last solution is to use div or span instead of a button and style it to look like a native button. Also take a look at what cimmanon commented
@cimmanon said:

Validate your document. Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.) 

