Firefox 和 chrome css 差异：元素高度不同答案

【问题标题】：Firefox and chrome css differences : element height is differentFirefox 和 chrome css 差异：元素高度不同
【发布时间】：2016-02-14 01:27:56
【问题描述】：

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

我有这个问题

任何帮助:)

【问题讨论】：

尝试添加 html,body{line-height:1em;} 或仅添加 line-height:1;
创建一个 fiddle 会让更多的用户帮助你

标签： html css google-chrome firefox

【解决方案1】：

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

在您的 HTML 中包含这个 CSS 文件，看看它是如何进行的。

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

【讨论】：

【解决方案2】：

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

【讨论】：