ie6兼容性问题详解

1. IE6及以下浏览器元素高度存在默认最小高度（18px以下），当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高 触发： 当你元素设置高度小于默认高度

解决办法：

 （1）可以给该元素设置overflow: hidden; 给超出的高度隐藏

 （2）可以设置元素字体大小像素为0，但是存在默认高度2px,依然配合overflow: hidden;一起使用

   div{

       height:1px;

       background:red;

       font-size:0;

       overflow:hidden;

      }

 

2. 不同浏览器解析元素默认的外边距和填充大小存在误差

解决方法: 

  把当前页面的可视区域元素的边距和填充都默认初始化为0

     margin:0px;padding:0px;

 

3. border元素边框1像素点状线（dotted）在IE6以及以下的解析为虚线

解决方法：

  使用photoshop制作点状线图片，使用背景图片属性

 

4. 元素外边距传递（BFC / hasLayout）

（1）BFC：块级格式化范围决定元素如何对其内容定位和其他元素的关系进行可视化布局的时候，BFC提供了一个环境HTML元素可以在这环境中按照一定规则布局，类似浮动会触发BFC，浮动元素内部子元素主要受该浮动元素影响，俩个浮动元素之间互不影响（独立容器，该容器的box布局与该容器没关系）正常文档流中，box框可以作为格式化上下文，类型有block/inline

触发条件: float:不为none;  overflow:不为visible   display:table-cell,table-caption,inline-block;其中任何一个    position:不为relative和static

 

（2）BFC可以做什么？

     a、如果一个浮动元素后面跟着一个非浮动的元素，前者遮盖后者

  （不和浮动元素重叠）

     b、清楚元素内部浮动

    父元素包含子元素，子元素浮动会脱离当前父元素区域使其高度失效

    解决方法overflow:hidden;但是相对IE6上需要配合zoom：1;使用，zoom：1，触发IE6特有的layot，layout是IE浏览器渲染引擎的一个内部组成部分控制元素其尺寸和定位

 

5. IE6以及以下的版本不支持cursor:pointer;鼠标手指形状

解决方法:

     cursor:hand;（该属性firefox是不支持的）

     html,body,div,a{margin:0px;padding:0px;}

     div{width:100px;height:100px;

     border:2px solid red;

     cursor:pointer;/*鼠标小手形状*/cursor:hand;/*兼容IE6以下小手形状*/}

 

6. IE6浏览器  img图片下部高度多余5px

解决办法：

  将img图片转化为块级对象，display:block;

 

7. li间距问题，IE6浏览器，li标签设置宽高，且li里面的元素发生了浮动

解决方法：

  （1）li不设置宽高  （2）li内部标签不进行浮动

 

8. 子选择器在IE6中不能使用E > F子选择器

解决方法：采用其他选择器或者采用后代选择器进行控制，如:

    div p{margin:10px;}

    div p p{margin:0;}替代掉 div>p{margin:10px;}

 

9. IE6不支持rgba与opacity两种透明的设置方法

解决方法：

  使用IE6中的滤镜filter替代掉，opacity:0.6; filter:alpha(opacity=60)

IE8以及更低版本的IE浏览器版本不支持rgba/opacity透明，两者区别在于前者只透明背景，内容不受影响，后者不管是什么，全部透明，如果要在Ie上正常显示，只有使用独有透明环境-滤镜-filter

 

10. table标签当中border-color属性设置无效

解决方法：

  运用css样式进行控制，而不是使用属性进行样式处理

 

11. a标签hover不适用于所有标签，IE6浏览器中hover只支持a标签的使用，不支持其他标签使用

解决方法: 

  合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果

      js代码例子：document.getElementById("hover").onmousemove = function(){

      alert("通过Js给元素修改背景颜色");

      this.style.backgroundColor = "silver";

    };

即，查找元素获取对象，绑定相关事件（鼠标触摸，点击，按下，抬起，滚轮），执行事件相应方法构造函数

 

12. img外部有a标签时，<a href=""><img src="img/1.jpg"></a>, 图片会产生一个border

解决方法: 

  设置img边框border:0

 

13. 横向双倍外边距，IE6中块元素浮动后，会出现横向双倍margin现象

解决方法：

  在float标签的样式控制中加入display: inline

 

14. IE6浏览器元素浮动的父元素 宽高为奇数（末尾数3/5），绝对定位right、bottom偏移量存在一像素误差
解决方法：

  防止定位元素父子元素 出现奇数宽度高度