css - 位置：固定 - Firefox 和 chrome 的区别

Question

我正在使用Skeleton 样板来创建响应式设计。

这是它分别在 Chrome 和 Firefox 中的外观

铬：http ://screensnapr.com/v/iaXYDS.jpg

火狐：http ://screensnapr.com/v/EW6HZM.jpg

如您所见，应该是菜单的灰色条在 chrome 中看起来很好。我想要实现的是一个粘性菜单，它在其父级中相对固定。

这是#menu的CSS（灰色条）

#menu {
    z-index: 1000;
    background: #666;
    position: fixed;
}

这是使用 Skeleton 样板的#menu 类。

<div id="menu" class="sixteen columns">

这将为#menu提供以下样式

.container .sixteen.columns {
    width: 940px;
}

.container .column, .container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

您可以通过此网址进行测试

http://home.piratelufi.com/sticky/

并下载源代码（对不起，杂乱的文件）

http://home.piratelufi.com/sticky/sticky.zip

Answer 1

在你的 CSSdisplay : inline中删除

.container .column, .container .columns{
display:inline; // remove this line 
}

因为你定义 float:left;