2. 全CSS实现 这种方式使用几个特殊的CSS来解决IE6下跟随滚动条移动的问题: 1) position:absolute;让IE6相信absolute就是fixed. 2)body { 整段代码演示: 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浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小心 (责任编辑:好模板) |