zoukankan      html  css  js  c++  java
  • IE常见BUG总结(持续更新)

    ie6~7下display:inline-block无效

    解决方案:需要hack触发hasLayout

    1 //IE6、7中内联元素(如span)触发layout属性后, 它的行为和标准中的 inline-block类似
    2 //IE6、7中块级元素(如div)触发layout属性,同时设置了 display: inline ,那么它的行为和标准中 inline-block 类似
    3 {
    4     *display: inline;
    5     *zoom:1;
    6 }

    IE6及更早浏览器只支持a(具有href属性)元素的:hover

    IE6浮动元素与非浮动元素相邻的3px间距bug

    解决方案:为浮动元素添加一个-3px的margin值,如元素左浮动时:

    1 {_margin-right:-3px;}

    IE6双倍margin

    问题:IE6中,首个浮动到父元素边上元素,如果具有该方向的margin值,margin值会以双倍显示

    解决方案:为浮动元素添加属性display:inline;

    IE6中li元素的垂直间隙

    问题:IE6中项目列表li的子元素浮动的时候,li之间会产生垂直的间隙,撑开ul 使高度增加

    解决方案:

    • 为li添加浮动

      1 li {float:left/right;}
    • 在定义li元素的垂直对齐方式

      li {vertical-align:middle;}
      //其他值也可以

    IE6中定位位置错误

    问题:如果参照物(position:relative;)没有触发haslayout,那么在ie6中“绝对定位的容器”的left和bottom就会有问题。 (PS:top和right表现正常)

    描述:

    解决方案:在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决

    小技巧:通常我们在设置一个容器为position:relative的时候,都会加上zoom:1来解决很多ie下的问题

    IE67中定位元素溢出不动

    问题: IE67中容器出线滚动条时,如果子元素为定位元素(绝对或相对),在拖动滚动条时该元素不会跟随移动

    描述:

    1 <div class="wrapper">
    2     <div class="content1">在ie67下,红色区域溢出,拖动垂直或水平滚动条时,红色区域不会动</div>
    3     <div class="relative">position:relative;</div>
    4     <div class="content2">&nbsp;</div>
    5 </div>

    解决方案:只需要在有滚动条的容器上也设置相对定位即可

    1 .wrapper {position:relative;}

    IE6中绝对定位1像素偏差

    问题:IE6下参照物宽高为奇数时,绝对定位元素设置了位置为right和bottom为0或者left和top为100%时,仍会有1px的空隙

    描述:

    1 .wrapper {position:relative;width:501px;height:101px;margin:50px;background:#66c;}
    2 .wrapper .itm{position:absolute;width:40px;height:40px;background:#4e3;}
    3 .wrapper .itm-1{top:0;left:0;}
    4 .wrapper .itm-2{top:0;right:0;}
    5 .wrapper .itm-3{left:100%;top:100%;}
    6 .wrapper .itm-4{left:0;bottom:0;}
    7 .wrapper .itm-5{right:100%;bottom:100%;}
    1 <div class="wrapper">
    2     <div class="itm itm-1">&nbsp;</div>
    3     <div class="itm itm-2">&nbsp;</div>
    4     <div class="itm itm-3">&nbsp;</div>
    5     <div class="itm itm-4">&nbsp;</div>
    6     <div class="itm itm-5">&nbsp;</div>
    7 </div>

    解决方案:照物宽高设置为偶数

    IE6中定位元素消失

    问题:ie6中,当容器子元素中同时具有具有浮动元素和绝对定位元素时,绝对定位的子元素会消失

    解决方案:绝对定位元素设置清楚浮动clear:both;。如果浮动元素在文档顺序上排列在绝对定位元素之后,还要为浮动元素设置

    1 {_margin-right:-3px;}/* 和浮动方向相反即可 */

    IE67中表单元素偏离

    问题:“某些表单元素”“父元素上触发了haslayout”后,这些表单元素会以“祖先元素上的margin-left值”偏离

    描述:

    1 .m-demo{width:400px;margin:0 0 10px;background:#ddd;}
    2 .m-demo .itm{margin-left:100px;zoom:1}
    3 .m-demo-fix .itm .inner{zoom:1;}
     1 <p>当“某些表单元素”的“父元素上触发了haslayout”后,这些表单元素会以“祖先元素上的margin-left值”偏离</p>
     2 <div class="m-demo">
     3     <div class="itm"><input /></div>
     4     <div class="itm"><textarea></textarea></div>
     5 </div>  
     6 <h2>fix</h2>
     7 <p>在“父元素外或内”“再嵌套一个触发haslayout的元素”即可</p>
     8 <div class="m-demo m-demo-fix">
     9     <div class="itm"><div class="inner"><input /></div></div>
    10     <div class="itm"><div class="inner"><textarea></textarea></div></div>
    11 </div>

    解决方案:在“父元素外或内”“再嵌套一个触发haslayout的元素”即可,或者

    1 .m-demo .itm *,{margin-left:-100px;} /*IE7及以下的选择器hack写法*/

    IE6 7的a链接失效

    问题:ie6、7,对于以下这样的结构,如果span触发了haslayout,那么图片区域将点击无效

    1 <div class="m-demo"> 
    2     <a href="#link">
    3         <span>
    4             <img src="xxx.jpg" />
    5         </span>
    6     </a>
    7 </div>

    解决方案:给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;

    IE 6 overflow:visiable;会撑开容器

    问题:IE 6 会扭曲默认的overflow visible值并将水平和垂直地扩展一个盒子一匹配内容。

    参考资料:http://nec.netease.com/library/category/#bug

  • 相关阅读:
    在Electron中最快速预加载脚本
    Babel是什么?
    node、npm、chrome、v8、sandbox是什么?
    我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
    NN[神经网络]中embedding的dense和sparse是什么意思?
    记一次失败的docker排障经历
    paddlepaddle关于使用dropout小案例
    paddlepaddle如何预加载embedding向量
    最近在部署推荐系统环境时,遇到一个很奇葩都问题
    fluid.io.load_inference_model 载入多个模型的时候会报错 -- [paddlepaddle]
  • 原文地址:https://www.cnblogs.com/WhiteCusp/p/3348549.html
Copyright © 2011-2022 走看看