首页 > 代码库 > 2014-7-17
2014-7-17
今天2个笔记：
一、IE6浏览器下固定定位的实现；
二、IE6、IE7浏览器的hasLayout与普通浏览器（IE7+、Chrome、FirFox等）的BFC
一、IE6浏览器下固定定位的实现：
<!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>
二、IE6、IE7浏览器的hasLayout与普通浏览器（IE7+、Chrome、FirFox等）的BFC：
关于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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。