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重置样式表，它将覆盖浏览器的所有默认样式。然后我们就不再担心各种浏览器中的填充和边距不同了。

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

以下是css代码的网址 http://meyerweb.com/eric/tools/css/reset/

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

仔细观察你的css我认为还有一个问题我认为可能导致这个问题：请更改填充：auto;填充：0像素;如下所示

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

Answer 2

我不知道Chrome和Firefox中页脚之间的区别究竟是什么问题，但我将页脚的高度设置为27px，这是图标的高度，以解决问题。 / p>

Answer 3

每个浏览器都有自己的默认样式。将它放在css文件的最顶层重置它们：

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Answer 4

默认情况下，浏览器有自己的属性，因为有时图像在IE中有边框，就像Chrome和mozila应用边距和填充尝试使其为0

ul,li{
margin:0px;
padding:0px;
}

Firefox与Chrome CSS填充和边距差异

4 个答案: