html - div padding-top Firefox 和 Chrome/Safari 的区别

Question

我在网站上工作，但在声明 CSS padding-top 时遇到问题。

我的问题是填充在 Firefox 中以不同于 Chrome 或 Safari 的方式呈现。我一将 navbardiv 切换到 position: fixed 就看到了这一点。

这是一个带有显示问题的基本代码的 JSFiddle:http://jsfiddle.net/8puCW/3/

有没有办法在渲染时保持固定的标题/顶部栏和导航栏而不产生差异？

谢谢。

Answer 1

由于您对 .navbar 使用了 position:fixed ( http://www.w3schools.com/cssref/pr_class_position.asp )，所以去掉 padding-top 来定位元素并使用 top 属性，如本 fiddle 所示:http://jsfiddle.net/8puCW/9/ .我已经在 FF Mac 中测试过它并且它是一致的。

.navbar {
    position: fixed;
    background: #D0D1D0;
    float: left;
    text-align: center;
    top: 54px; /*UPDATE HERE*/
    width: 200px;
    height: 100%;
    padding-top:20px; /*UPDATE HERE*/  }