Diferencias entre Firefox y css css: la altura del elemento es diferente

Tengo un problema cuando diseño mi nuevo sitio web. La altura de mis elementos es diferente entre Chrome y Firefox.

Esta es la diferencia

Diferencia de altura entre Firefox y Chrome

este es el código html

este es mi código CSS

 .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; } 

y cuando agrego

 
.clear { clear: both;}

tengo este problema

problema

alguna ayuda 🙂

La mayoría de las diferencias de representación del navegador, especialmente la altura, pueden manejarse si utiliza un restablecimiento o, preferiblemente, un archivo CSS normalizado.

Incluya este archivo CSS en su HTML y vea cómo funciona esto.

http://necolas.github.io/normalize.css/

Los diferentes navegadores tienen diferentes alturas de línea predeterminadas, y es posible que deba escribir explícitamente la altura de línea de su elemento o cuerpo entero en píxeles en un documento CSS, y luego se verá igual en todos los navegadores.