顶部导航条固定不动,适合ie6789,chrome,fox

最近在做站的时候,需要顶部导航条固定不动,要适应所有浏览器

代码如下:

.header-wrapper {
   background-color: #ccc;;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
 }

<div class="header-wrapper">导航条固定在顶部不动</div>

在IE789,chrome,fox下浏览,正常,但在IE6下不行

IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的,但是IE6却不支持它。幸好,IE6 支持“position:absolute” 和 Internet Explorer 的CSS表达式(expression)。所以,对于别的浏览器,我们可以用“position:fixed” 进行固定定位,而对于IE6,我们可以用“position:absolute” 和CSS表达式,

加入代码:

/*ie6下样式,加下划线表示只针对ie6 的hack*/
 _position:absolute; /* 把导航栏位置定义为绝对位置 */
 _top:expression(eval(document.documentElement.scrollTop)); /* 把导航栏位置放在浏览器垂直滚动条的顶端 */

IE6下显示正常

摘自:http://lg0391.blog.163.com/blog/static/113312620142801638402/


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章