Div和Firefox / Chrome / Safari之间的差异填充

Question

我正在网站上工作，我在声明CSS padding-top方面遇到了问题。

我的问题是，在Firefox方面，填充以不同的方式呈现给Chrome或Safari。我将navbar div切换为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属性，如此小提琴所示：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*/  }