ie hack 第二波

文章目录

7.Ie6 position:fixed

html Markup

<body>
 	 	<div class="ie6fixedLT ie6fixed">IE6完美兼容position:fixed</div>
 	 	<div class="ie6fixedRT ie6fixed">IE6完美兼容position:fixed</div>
 	 	<div class="ie6fixedLB ie6fixed">IE6完美兼容position:fixed</div>
 	 	<div class="ie6fixedRB ie6fixed">IE6完美兼容position:fixed</div>

 	 

CSS Code

.ie6fixed {border: 1px solid red; padding: 5px;}
 	 	* 修正IE6振动bug */
 	 	* html,* html body{background-image:url(about:blank);background-attachment:fixed}
 	 	 .ie6fixedLT{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
 	 	 .ie6fixedRT{position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
 	 	 .ie6fixedLB{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
 	 	 .ie6fixedRB{position:absolute;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
 	 	 html>body .ie6fixedLT{position:fixed;left:0;top:0}
 	 	 html>>body .ie6fixedRT{position:fixed;right:0;top:0}
 	 	 html>body .ie6fixedLB{position:fixed;left:0;bottom:0}
 	 	 html>body .ie6fixedRB{position:fixed;right:0;bottom:0}

8、浮动层错位

当内容超出外包容器定义的宽度时,在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。浮动层错位问题在IE6下没有真正让人满意的解决方法,虽然可以使用overflow:hidden;或overflow:scroll;来修正, 但hidden容易导致其他一些问题,scroll会破坏设计;javascript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生,使用一个固定的布局或者控制好内容的宽度(给内层加width)

9、绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottom和right会产生错误。唯一的 解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。

10、3像素间距bug

在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3像素的间隔。给浮动层添加 display:inline 和 -3px 负值margin。给中间的内容层定义 margin-right 以纠正-3px

11、IE6调整窗口大小的 Bug

当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素都会固定不动了。解决办法:给body定义 position:relative;就行了。
阅读更多

  1. Explorer Exposed!
  2. Respond.js让IE6-8支持CSS3 Media Query
  3. IE6打开提示已终止操作,无法打开的原因及解决方法
  4. 去掉IE6下的链接虚线框
原文链接:ie hack 第二波 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/ie-hack-2.html)

发表评论

请登录后发表评论: