IE常见BUG总结

1.position:fixed;

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{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)))}

2.子元素100%无法获取父元素未定义高度的高度

    _height:expression(document.body.offsetHeight+"px");

3.透明度失效

  opacity: 0.7;
  filter:Alpha(opacity=70);

其中IE tester中还是不透明,测试软件问题,真实浏览器已经透明

4.定位DIV在当前页面(client)中心位置,滚动条滚动不影响位置,重点标粉

<div class="m-loginWarp">
      
</div>
.m-loginWarp{
    width: 520px;
    height: 410px;
    background:#fff;
    z-index: 1000;
}

js

var $loginWarp=$(".m-loginWarp");
//判断是否是IE6-9;
    var flag="getComputedStyle" in window;
        function loginPos() {
            //获取当前元素的h,w
            var $loginW=$loginWarp.width();
            var $loginH=$loginWarp.height();
            //是现代浏览器(IE9+ firefox goole,直接用fixed
            if (flag){
                $loginWarp.css({
                    position:"fixed",
                    left:"50%",
                    top:"50%",
                    marginLeft:-$loginW/2,
                    marginTop:-$loginH/2
                })
                return
            }
        //    如果不是现代浏览器,获取当前页面的宽高-元素宽高/2就是左上距离
        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
        var clientH=(document.documentElement.clientHeight||document.body.clientHeight);

        var left=(clientW-$loginW)/2+(document.documentElement.scrollLeft||document.body.scrollLeft);
        var top=(clientH-$loginH)/2+(document.documentElement.scrollTop||document.body.scrollTop);
        $loginWarp.css({
            position:"absolute",
            left:left,
            top:top
        })
    }
//检测窗口变化 $(window).on(
"resize scroll",function () { loginPos(); })

 

posted @ 2018-05-14 14:05  追忆枉然  阅读(150)  评论(0编辑  收藏  举报