CSS实现浮动层跟随滚动条特效(兼容IE6)(2)_其他_php教程

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="//www.zuimoban.com/goodspeed/795/o_o_mylogo.gif" />

37 </div>

38 </body>

39 </html>

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

(责任编辑：最模板)