html - Firefox 和 chrome 的 css 差异 : element height is different

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 文件，则可以处理大多数浏览器渲染差异(尤其是高度)。

将此 CSS 文件包含在您的 HTML 中，看看效果如何。

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