西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > 其他 >

CSS实现浮动层跟随滚动条特效(兼容IE6)(2)

时间:2012-09-13 09:35来源:未知 作者:好模板 点击:
2. 全CSS实现 这种方式使用几个特殊的CSS来解决IE6 下跟随滚动条移动的问题: 1) position : absolute ;让IE6相信 absolute就是fixed. 2) body { margin : 0 ; /* 必须 */ height

2. 全CSS实现

这种方式使用几个特殊的CSS来解决IE6下跟随滚动条移动的问题:

1) position:absolute;让IE6相信absolute就是fixed.

2)body {
    margin
:0;  /* 必须 */
    height
:100%; /* 必须 */
    overflow-y
:auto;/* 必须 */
    
}

整段代码演示:

View Code
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
3 <head>
4 <style type="text/css">
5 body {
6 margin:0; /* 必须 */
7 border:0; 
8 height:100%; /* 必须 */
9 overflow-y:auto;/* 必须 */
10 }
11 #menu {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE并不认识fixed,而FF认识 */
12 * html #menu {position:absolute;} /* 这个只有IE认识 */
13 
14 </style>
15 <!--[if IE 6]>
16 <style type="text/css">
17 /*<![CDATA[*/ 
18 html {overflow-x:auto; overflow-y:hidden;} /*用来隐藏html的滚动条*/
19 /*]]>*/
20 </style>
21 <![endif]-->
22 </head>
23 
24 <body>
25 <div>
26 <script>
27 document.write("<ul style='list-style-type:decimal'>");
28 for(var i=0;i<300;i++)
29 {
30 document.write("<li></li>");
31 }
32 document.write("</ul>");
33 </script>
34 </div>
35 <div id="menu">
36 <img src="https://www.ldhost.cn/help/goodspeed/795/o_o_mylogo.gif" />
37 </div>
38 </body>
39 </html>
复制代码

分析: position:absolute;在IE6下只能起到固定元素位置的用处,但是在height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了!并且在IE6浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小心

 

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------