Firefox和chrome css的区别：元素高度不同

Question

我设计新网站时遇到问题。 Chrome和Firefox之间的元素高度不同。

这是差异

这是 html 代码

<div class="bottombar">
    <ul>
        <li><button><span class="glyphicon glyphicon-thumbs-up"></span> Like</button></li>
        <li><button class="comment"><span class="glyphicon glyphicon-comment"></span> Comment</button></li>
        <li><button><span class="glyphicon glyphicon-thumbs-up"></span> 0</button></li>
        <li><button class="showcomments"><span class="glyphicon glyphicon-comment"></span> 0</button></li>
    </ul>
</div>

这是我的 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;
}

当我添加

<div class="clear"></div>
.clear { clear: both;}

我有这个问题

任何帮助：）

Answer 1

如果您使用重置或最好是标准化CSS文件，则可以处理大多数浏览器渲染差异（尤其是高度）。

在HTML中包含此CSS文件，看看情况如何。

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

Answer 2

不同的浏览器具有不同的默认行高，您可能需要在CSS文档中以像素为单位明确写出元素或整个主体的行高，然后在所有浏览器中看起来都一样。