阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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;
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录