Firefox vs Chrome CSS 填充和边距差异答案

【问题标题】：Firefox vs Chrome CSS padding and margin differenceFirefox vs Chrome CSS 填充和边距差异
【发布时间】：2015-02-09 13:04:34
【问题描述】：

我的 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;
}

【问题讨论】：

使用 Firefox 中的开发工具检查元素。当一切都失败时，使用 Normalize.css
或使用*{margin:0; padding:0;}
可能只是图像本身。默认情况下，图像是display: inline 和vertical-align: baseline。这会导致图像底部的间隙将图像父级向下推。如果这是造成间隙的原因，那么您可以使用 #contact-bar img { display: block; } 将它们设为块元素或使用 #contact-bar img { vertical-align: middle; } 更改默认垂直对齐方式。
使用一些 normalize.css 规范化你的 CSS

标签： html css google-chrome firefox

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

@Soubriquet 你能试试我的更新选项吗？ auto 不是 padding 属性的有效值。我认为如果您发布完整的标记（只是语义）会更好，这将有助于深入研究这个问题。
这很有帮助。谢谢

【解决方案2】：

我不知道 Chrome 和 Firefox 中页脚之间的差异的确切问题是什么，但我将页脚的高度设置为正好 27px，即图标的高度，以解决问题。

【讨论】：

【解决方案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;
}

【讨论】：

这并没有改变任何东西。 ://
@Soubriquet 我无法用您提供的代码复制您的问题。你能创建一个 jsfiddle 来显示这个问题吗？

【解决方案4】：

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

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

【讨论】：