位置:固定-在firefox和chrome的差异

Question

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

这就是它分别在Chrome和Firefox 中的样子

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

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

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

这是#菜单(灰色条)的css

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

这是使用Skeleton样板的#菜单的类。

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

哪个会在#菜单中提供以下样式

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

你可以通过这个URL 进行测试

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;