html - Firefox 与 Chrome CSS 填充和边距差异

Question

我的 CSS 有问题。在 Firefox 中我的图标下方有一个空白，但在 Chrome 中没有。我真的很困惑问题出在哪里。

Firefox 页脚的屏幕截图:http://puu.sh/dqkrp/1ca27fd502.png
Chrome 页脚的屏幕截图:http://puu.sh/dqkOw/ea7749b56c.png

<footer>
  <div id="contact-bar">
   ...
  </div>
</footer>

#contact-bar {
    width:100%;
    height:auto;
    float:right;
    margin-bottom: auto;
    bottom: 0px;
    background-color: #000000;
}

#contact-bar ul {
    margin:auto;
    display: inline-block;
    list-style-type: none;
    padding: auto;
    float:right;
}

#contact-bar ul li{
    float:right;
}

#contact-bar ul li a {
    text-decoration: none;
}   

footer {
        position: fixed;
        z-index: 9999;
        clear:both;
        bottom:0;
        left:0;
        width:100%;
        margin:0px;
        padding:0px;
}

Answer 1

每个浏览器都有自己预定义的 HTML 标记样式。因此，如果我们没有为元素指定样式，则不同的浏览器可能对该元素具有不同的样式。

克服这个问题的最流行的方法是使用 css 重置样式表，它将覆盖浏览器的所有默认样式。这样我们就再也不用担心各种浏览器的 padding 和 margin 不同了。

据我所知，Eric Meyers 的重置样式是重置样式中最受欢迎的

下面是css代码的url http://meyerweb.com/eric/tools/css/reset/

只需复制此页面中的内容并将其添加到您的 css 中即可。这应该可以解决您的问题。

仔细查看您的 css，我认为还有一个问题可能会导致此问题:请更改 padding :auto;填充:0px；如下图

#contact-bar ul {
    margin:auto;
    display: inline-block;
    list-style-type: none;
    padding:0px !important;
    float:right;
}