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

我在设计新网站时遇到了一个问题。我的元素在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>

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

.clear{clear:两者；}

我有这个问题

---

任何帮助：）

如果使用重置或最好使用规范化CSS文件，大多数浏览器呈现差异（尤其是高度）都可以处理

将此CSS文件包含在HTML中，然后查看如何进行

---

不同的浏览器有不同的默认行高，您可能需要在CSS文档中以像素为单位显式地写入元素或整个正文的行高，然后它在所有浏览器上看起来都一样。

尝试添加html、正文{line height:1em；}或仅仅是行高：1；创建小提琴将允许更多用户帮助您