位置：固定 - firefox和chrome的区别

Question

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

这分别是Chrome和Firefox的外观

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

Firefox：http://screensnapr.com/v/EW6HZM.jpg

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

这是#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

移除至您的css

中的display : inline

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

因为您定义了 float:left;