title: li's height is larger than it's container in FireFox
body: <p>I have a strange issue. Everything displays fine in both Chrome and IE, but not FireFox. See below:</p>
  
  <p><img src="https://i.stack.imgur.com/dJgKT.jpg" alt="enter image description here"></p>
  
  <p>The code for the navigation seen above is as follows</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/about-us/"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/products/"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/contact-us/"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>nav {
      margin: 0 0 10px 0;
  
      text-align: center;
      background: #0054a6;
  
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
  }
  
  nav li {
      display: inline-block;
      margin: 10px -4px 10px 0;
  }
  
  nav li a {
      padding: 12px 75px;
  
      text-decoration: none;
      background: #0054a6;
      color: #ffffff;
  }
  
  nav li a:hover {
      background: #ffffff;
      color: #000000;
  }
  </code></pre>
  
  <p>Why is the container not the same height as it's contents? I'm not looking for a fix, just an explanation as to why it does this with my code.</p>