标签：style blog http color os 文件
一、IE6浏览器下固定定位的实现；
二、IE6、IE7浏览器的hasLayout与普通浏览器（IE7+、Chrome、FirFox等）的BFC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6浏览器下position:fixed固定定位测试</title> <style type="text/css"> body{ margin: 0; padding: 0; } p{ height: 100px; line-height: 100px; text-align: center; } /*注：document.documentElement.scrollTop在chrome下始终等于0，在IE下不为0；document.body.scrollTop在ff和IE下始终等于0，在chrome下不为0*/ .fix_top{ height: 40px; width: 100%; background: #599CC2; text-align: center; line-height: 40px; position: fixed; top: 0; _position:absolute; _top:expression(eval(document.documentElement.scrollTop));} .side_left{ height: 40px; width: 300px; background: #007F36; text-align: center; line-height: 40px; position: fixed; top: 200px; _position:absolute; _top:expression(200+eval(document.documentElement.scrollTop)); right: 50%; margin-right: 450px; } .side_right{ height: 40px; width: 300px; background: #007F36; text-align: center; line-height: 40px; position: fixed; top: 200px; _position:absolute; _top:expression(200+eval(document.documentElement.scrollTop)); left: 50%; margin-left: 450px; } .fix_bottom{ height: 40px; width: 100%; background: #EB0000; text-align: center; line-height: 40px; position: fixed; bottom: 0; _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight -this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} html{ _background:url(about:blank); /* 阻止闪动 ,把空文件换成about:blank,减少请求 */ } </style> </head> <body> <div class="fix_top">固定顶部</div> <div class="side_left">固定左侧栏</div> <div class="side_right">固定右侧栏</div> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <p>IE6浏览器下固定定位实验</p> <div class="fix_bottom">固定底部</div> </body> </html>
关于hasLayout与BFC，值得仔细研读的一篇文章：http://www.17leba.com/haslayout%E4%B8%8Ebfcblock-formatting-contexts%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关于hasLayout和BFC的测试</title> <style type="text/css"> body,p{ margin: 0; padding: 0; } img{ display: block; float: left; margin-right: 20px; } p{ background: #007F5F; line-height: 40px; text-align: center; margin-bottom: 10px; } .yes_layout{ zoom: 1; }/*块级元素设置了zoom以后，触发hasLayout被赋值true。IE6/7浏览器下，该元素拥有布局，不再被浮动元素覆盖*/ .yes_bfc{ overflow: hidden; }/*元素设置了overflow以后，触发bfc。标准浏览器下（包括IE7+浏览器下），该元素拥有布局，不再被浮动元素覆盖*/ </style> </head> <body> <img src="images/shoes.jpg" alt="图片"/> <img src="images/shoes.jpg" alt="图片"/> <img src="images/shoes.jpg" alt="图片"/> <p>hasLayout和BFC都没有被触发</p> <p class="yes_layout">hasLayout被触发</p> <p class="yes_bfc">BFC被触发</p> <p class="yes_layout yes_bfc">hasLayout和BFC都被触发</p> </body> </html>
标签：style blog http color os 文件
原文地址：http://www.cnblogs.com/liumeimei/p/3852227.html
