IE 下开发踩到的坑

开发中遇到的坑 0、IE6 下 div 图片下边 4px 空隙 bug 的解决办法 清零的时候设置 img 为“display:block;”这样就可以了

1、在开发商品详情页时候，个人博客鼠标移入后在 IE5-7 中 z-index 时效 原因是：IE7 及更早版本对 z-index 的解析有个讨厌的 Bug，如果父元素具有 position: relative/absolute; 属性，那么只设置子元素的 z-index 是不起作用的，父元素也得一起设置。也就是说必须把要控制元素和它上层的所有 DIV 都加上 z-index 才行。

放大镜功能，天坑合集！ 1、放大镜效果中；大图片的 left 和 top 兼容问题；左右便捷判断

//        bigImg.style.left="-"+(l/tabW*bigImg.width)+"px";
//        bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
        //如果样式用上面的写，在IE678的时候有兼容性问题，应该改为下面的
if(l<=0){
    bigImg.style.left=="0px";
}else{
    bigImg.style.left="-"+l/tabW*bigImg.width+"px";
}
if(t<=0){
    bigImg.style.top=="0px";
}else{
    bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
}

2、放大镜效果中，因为要兼容到 IE5678，所以用一个 DIV 抱住元素，必须用定位；但是放大镜的镜片 mark 定位需要与鼠标相连；需要算出小图片的 left 值；此时需要用到元素距离浏览器左边框的距离； 解决办法是：算出距离左上角的绝对 left 和 top 来；然后再去操作，写一个函数解决；

function offset() {
    var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent;
    while (par) {
        left += par.offsetLeft;
        top += par.offsetTop;
        if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
            left += par.clientLeft;
            top += par.clientTop;
        }
        par = par.offsetParent;
    }
    return {
        left: left,
        top: top
    };
}

3、在滚动图片的时候；放大镜会错位； 解决办法是，使用 scrollTop 来操作；然后监听页面的滚动事件；只要滚动了页面，就强制刷新一个滚动出的值；

function getWin(attr) {
    return document.documentElement[attr] || document.body[attr];
}
//上面的函数获取元素的属性，解决clientHeight，scrollTop等的兼容性问题；
//获取鼠标滚动掉的像素;鼠标滚动的时候，强制刷新winTop;
var winTop =getWin("scrollTop");
window.onscroll=function(){
    winTop =getWin("scrollTop");
}

放大镜的镜片不透明在 IE6 的解决办法 用低不透明的 png 图片，然后再加一个边框；因为低不透明度的图片在在 IE 里不显示，直接为空的；只显示边框；这样也可以达到指定范围的效果；

浮动层的 div 被 select 遮挡 原因： 在 IE 中，select 属于 window 类型控件，它会“挡住”所有非 window 类型控件 可以这么理解，div 这样的组件是在浏览器客户区使用代码“渲染”的， 他们被渲染在客户区的绘画表面上， 而 select 是使用的标准 windows 控件，只是作为客户区的子控件放置而已， 它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的 window 控件， 比如 iframe 和其他的 select，如果你使用过类似 Delphi 这样的环境就会自然理解。IE7 解决了此类 BUG。

解决办法：

• 修改 select，不用标准 select，而是自己用其他 html 元素模拟
• 修改你的 div，使用 iframe。
• 在 div 被显示的时候或者到达 select 所在位置时隐藏 select
• 在 div 中或 div 的同一坐标上，用相同尺寸的 iframe 先遮挡一下，然后在 iframe 上显示 div 的内容。 5.Object 对象的优先度较高，可以挡住 select 框

最好的解决办法最好的方法：iframe 来当作 div 的底 Div 被 Select 挡住，是一个比较常见的问题。

有的朋友通过把 div 的内容放入 iframe 或 object 里来解决。

可惜这样会破坏页面的结构，互动性不大好。

这里采用的方法是：

虽说 div 直接盖不住 select

但是 div 可以盖 iframe，而 iframe 可以盖 select,

所以，把一个 iframe 来当作 div 的底，

这个 div 就可以盖住 select 了。

原来的 JS 代码是：

var bigImg=document.createElement("img");
bigImg.src="img/peony.jpg";
bigImg.id="bigImg";
container.appendChild(bigImg);

改后的是：

var bigImg=document.createElement("img");
bigImg.src="img/peony.jpg";
bigImg.id="bigImg";
var pBigImg=document.createElement("p");
pBigImg.innerHTML="<iframe src=\"\" style=\"width:800px;height:536px;top:0px;left:0px;position:absolute;visibility:inherit;z-index:-1;\" frameborder=0></iframe>"
pBigImg.appendChild(bigImg);
container.appendChild(pBigImg);

做个人页面的时候，用雪碧图的时候，背景图片不出来； 原本代码：

#introduces .left ul li .user{background: url("../img/ico.png")no-repeat 0 0;}

修改后的代码

#introduces .left ul li .user{background: url("../img/ico.png") no-repeat 0 0;}

仅仅是相差了一个空格；在 no-repeat 前面打一个空格即可；

经典 padding 兼容性问题；

IE 低版本会把 padding 算成 width 的一部分；在做技能技能书的时候，如果用 padding-left 属性让文字向右；在地版本 IE 里就会有误差；解决的办法是可以用首行空格算；使用 text-indent: 11px; 即可；这个属性如果写 text-indent: 2em; 代表的就是坑 2 个字符；

当在一个容器里文字和 img、input、textarea、select、object 等元素相连的时候，对这个容器设置的 line-height 数值会失效； 对和文字相连接的 img、input、textarea、select、object 等元素加以属性

margin: (所属line-height-自身img,input,select,object高度)/2px 0;
vertical-align:middle

如果整个页面中有很多 Img 时，可以直接定义

img{
    margin: (所属line-height-自身img,input,select,object高度)/2px 0;
    vertical-align:middle
}

网上也有人说是，line-height 只可以应用于 inline 行内元素。所以 line-height 属性的设置对 input 元素是无效的。

display:block;    /*转换块级*/
display:inline;    /*转换行内*/
display:inline-block;    /* 其实仍未行内元素设置width及height属性等*/

但是我设置 display:inline; 还是不行；

因为我是需要一次性设置 9 张图片，所以没有好的解决办法；然后就直接改素材，把素材该大即可；

当一个 css 样式同时设置了 float 和 margin 的属性的时候，在 ie7+ 及火狐上，该元素显示正常。但是在 ie6 下，将会出现双倍的 margin 属性值，

<div style="float:left;margin-left:10px;"> </div>

上面的就是双倍的 margin-left；解决办法是解决此办法的最简单的方法是，在 style 中添加：display:inline;

<div style="float:left;display:inline;margin-left:10px;"> </div>

IE6 中 line-height 的兼容性问题；

height:59px;
line-height: 60px;

上面的代码，在 IE6 中会被解析为，宽度是 60px 的；只需要把 line-height 改的和 height 一样就可以了；

margin-bottom 在标准和 IE 不一致的时候（IE 有时候会多一些像素），可以用 display:inline-block 转一下，然后统一设置，这样就可以了 display:inline-block 简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个 link（a 元素）inline-block 属性值，使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

文字两边对齐 用 text-align 即可；

text-align:justify;