title: Div's inside of button element not showing up in firefox
body: <p>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?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button class="mobile-nav-button"&gt;
  
    &lt;div class="bar"&gt;&lt;/div&gt;
    &lt;div class="bar"&gt;&lt;/div&gt;
    &lt;div class="bar"&gt;&lt;/div&gt;
  
  &lt;/button&gt; &lt;!-- mobile-nav-button --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
    }
  </code></pre>