经常看到各大网站会在页面顶部或底部放一个固定的漂浮导航条,如最近的新浪微博、腾讯微博及QQ空间及天涯论坛等,这个导航条在浏览器窗口上的位置是固定不动的,不随垂直滚动条的拉动而变化,这么做的好处是便于快速切换内容。只是有一点,除了天涯论坛以外,它们都不支持IE6及采用其内核的浏览器。虽然IE6必将被淘汰,但是中国人使用IE6的人群还是很庞大的,让IE6支持固定导航条,很困难吗?
网上邻居研究了一些网站,又在网上搜索学习了相关内容,这种支持IE6浏览器的固定漂浮导航条,可以用js实现,也可以通过CSS来实现,本文就后一个方法做个简单介绍。
在CSS position 属性的值中,有两个绝对定位,即“position:fixed”和“position:absolute”,简单的理解,前者是相对于浏览器窗口进行定位,后者是相对于static 定位以外的第一个父元素进行定位。教科书上是这么说的:
position 属性
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的,但是IE6却不支持它。幸好,IE6 支持“position:absolute” 和 Internet Explorer 的CSS表达式(expression)。所以,对于别的浏览器,我们可以用“position:fixed” 进行固定定位,而对于IE6,我们可以用“position:absolute” 和CSS表达式,比如:
#top
{
/* 对于其他浏览器 */
position:fixed;
top:0px;
/* 对于 IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");
}
采用以上代码,顶部的导航条,在IE6情况下,确实固定在顶部了,但是,拉动垂直滚动条时,这个导航条有跳动现象,解决此问题的方法是使用“background-attachment:fixed”为body添加一个背景图片,强制页面在重画之前先处理CSS,而且这个图片可以是虚拟的,比如“background:url(任意名称)”。
body {background: url(about:blank); background-attachment: fixed;}
相关推荐
非ie内核浏览器activex支持插件, 可在非ie内核浏览器中调用activex控件。
vc开发基于IE内核的浏览器 源代码.zip
非ie内核浏览器activex支持插件安装包
VB环境下使用非IE内核的浏览器控件,Google
非ie内核浏览器activex支持插件.rar
手机移动端固定在顶部的导航栏代码,支持iOS,Android(暂不支持WP)等系统以webkit为内核的浏览器,建议在PC端使用以webkit为内核的浏览器(如:Google Chrome)中缩小浏览器窗口宽度查看效果,PC端查看效果需要用...
众所周知,activex是微软搞得,因此只有ie内核的浏览器才能支持。像firefox(火狐)、Chrome、Apple Safari等非ie内核浏览器都不支持activex控件,这样就大大加大了系统使用的局限性。 因此考虑是不是可以让非ie内核...
1,基于IE内核的浏览器,拥有浏览器流行的多标签、多进程浏览能力,内含源码。 2,在保留兼容性的前提下,对 IE 内核进行优化,努力改善浏览速度。 3,源于网络,分享于网络,感谢!
很简单的一个IE内核的浏览器,支持所有win系统(32位与64位上都运行成功),主页设置为百度,不能修改,永不弹窗,没有收藏夹,所有网址都要手动输入。 虽然简单,但有的场合很好用,试试你就知道,因为小,所以速度...
主要介绍了C#实现基于IE内核的简单浏览器,较为详细的分析了C#实现浏览器的原理与主要功能实现方法,并附带完整实例供大家下载,需要的朋友可以参考下
使用java编写的基于IE内核多标签式的网页浏览器
各种非ie的内核浏览器activex支持插件
这是一个利用 IE 内核编写的 Web 浏览器,关键的技术是利用 WebRequest 和 WebResponse 来获取网站的内容
ie内核多页面浏览器[IE40src.rar]-精品源代码
java浏览器调用ie内核,简单调用.也是从网上下的代码,做了部分改良
易语言谷歌69内核最新浏览器源码!使用精易Web浏览器支持库。@1185384801。
用VB自写一个IE内核的浏览器 用VB自写一个IE内核的浏览器,超简单的那种,界面还有点粗糙,本人的美感不是太好,只顾侧重功能了,请大家凑合吧。它可以实现像IE一样多的功能,收藏夹、地址栏,进度条、前进、后退等...
一个小巧的仿谷歌界面IE内核浏览器,通过右键单击Tab来实现页面关闭。采用单一进程架构,有时界面会卡顿。