title: Firefox and chrome css differences : element height is different
body: <p>I have a problem when I design my new website. The height of my elements is different between Chrome and Firefox.</p>
  
  <p>This is the difference </p>
  
  <p><img src="https://i.stack.imgur.com/3jc0s.jpg" alt="Difference hight between Firefox and Chrome"></p>
  
  <p>this is <strong>html</strong> code</p>
  
  <pre><code>&lt;div class="bottombar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;button&gt;&lt;span class="glyphicon glyphicon-thumbs-up"&gt;&lt;/span&gt; Like&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="comment"&gt;&lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt; Comment&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button&gt;&lt;span class="glyphicon glyphicon-thumbs-up"&gt;&lt;/span&gt; 0&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="showcomments"&gt;&lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt; 0&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is my <strong>css</strong> code</p>
  
  <pre><code>.bottombar {
      background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)), color-stop(1, rgba(245,245,245,1)));
      background: -moz-linear-gradient(center top, rgba(255,255,255,1), rgba(245,245,245,1));
      margin: 2px -5px 0px -5px;
      border-top: solid 1px #ccc;
      border-bottom: solid 1px #ccc;
      position: relative;
      height: auto;
      display: block; 
      height: 26px;
  }
  .bottombar ul {}
  .bottombar ul li {
      list-style-type: none;
      float: left;
      border-right: solid 1px #ccc;
  }
  .bottombar ul li button {
      border: 0px;
      display: block;
      background: rgba(255,255,255,0.0);
      padding: 5px;
      cursor: pointer;
  }
  .bottombar ul li button:hover {
      background: #fff;
  }
  </code></pre>
  
  <p>and when i add </p>
  
  <pre><code>&lt;div class="clear"&gt;&lt;/div&gt;
  .clear { clear: both;}
  </code></pre>
  
  <p>i have this problem </p>
  
  <p><img src="https://i.stack.imgur.com/djCIU.jpg" alt="problem"></p>
  
  <p>any help :)</p>