我尝试过使用下面的代码,但它只显示Chrome和Mozilla中的结果不能在IE6中运行.
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
输出:
Browser CodeName: Mozilla
Browser Name: Netscape
Browser Version: 5.0 (Windows)
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0 …我看到固定位置元素在相对定位的父级中的行为方式存在差异.根据我在网上找到的文档,FireFox和Chrome应该将元素固定到视口而不是父视图.但是,我发现如果我没有在固定元素上指定左/右值,它在静态和固定之间的某种混合行为,在某种意义上它是垂直固定到视口,但移动就好像它是父元素中的静态元素.我找不到围绕这些条件的任何官方/受尊敬的文件.它们基本上都表示如下内容:
固定定位 不要为元素留出空间.相反,将其放置在相对于屏幕视口的指定位置,并且在滚动时不要移动它.打印时,将其放置在每页的固定位置.
另一方面,Safari似乎渲染它,因为它被描述为纯粹固定到视口的地方,无论我是否将父元素设置为相对而没有定义任何顶部/右侧/底部/左侧属性.如果你有机会通过点击从左边-100像素的青色div来尝试在Safari中试试.黄色条将固定在视口中:
http://jsfiddle.net/bbL8Lh4r/2/
那么哪个浏览器正确呈现这个？我的所有浏览器都已更新到最新版本.起初我认为Safari只是通过阅读文档才是正确的,但FireFox和Chrome都有着相同的不同视图,它们似乎是静态和固定之间的混合体.
HTML
<body>
<aside>
Blah
</aside>
<div class="container">
<div class="nav">
BLARGH
</div>
</div>
</body>
CSS
body,
aside,
.container,
.nav {
margin:0;
padding:0;
}
aside {
background:red;
width:30%;
height:800px;
float:left;
}
.container {
position:relative;
height:800px;
width:70%;
background:teal;
float:right;
}
.container.stickied {
left:-100px;
}
.container .nav {
position:fixed;
background:yellow;
width:inherit;
}