IE6、7bug汇总

IE1、ie6最小高度问题 ——IE5（19px）、IE6（15px）

--当有内容时（height：18px，要换行）：IE6、7常常以显示完整性，IE高版本浏览器或其他标准浏览器是以盒图完整性；【补充】       
--当没有内容时：说明了最小高度问题；  
--其实这是个不是问题的问题（看怎么用了，如果放内容一般不会限定height）  
——解决方法：为问题元素添加 overflow：hidden；  

2、li最后一个子元素浮动后li间产生3px外边距； —— IE6、7

-- 

imooc

-- 

首页

-- link  
——解决方法：为li添加vertical-align：top；  

3、子元素相对定位bug —— IE6、7

——为父元素添加一个边框，为子元素（填充背景）做相对定位，再给父级元素overflow：hidden;到IE6、7下发现问题，子元素溢出部分为隐藏；    
——解决方法：也为父元素添加position：relative；相对定位；  

4、多个块级元素并排显示-3px，bug —— IE6

——添加两个以上兄弟元素，开始保证前边几个浮动。在IE6中就会发现问题；  
——解决方法：所有并排元素都浮动……  

5、1px点线bug ——IE6

——添加两个兄弟元素。一个加虚线边框（1px），另一个加点线边框（2px）。到IE6下会发现问题；  
——解决方法：把点线边框变为大于等于2px，或一定用1px点线的话，切片去吧！哈哈……  

6、子元素双外边距bug ——IE6

——父子元素都浮动。（不用限制父的width和height）  
——其中的子（试试多个子元素的。哈哈……）加一个横向外边距  
——解决方法：通过为浮动的子元素添加display:inline;  

7、img的下行空间bug —— 所有浏览器都存在这个问题。是图片本身问题

——添加一个div包裹img ，并给div一个背景，到浏览器下就会发现问题；  
——解决方法：单个图片的话（为图片img标签添加display:block;）；如果是：多个图片的话（就为每个img添加vertical-align：top；）    ——【注意空格，不用太差异，哈哈……】  

8、表单输入控件bug ——两个需要注意的问题（margin–IE6、7和border–IE6）

—— 添加一个form（先去除一下默认的margin、padding并添加背景，再加个width，有新问题）包含一个输入框控件input（width、height、背景）             
    ——input上下margin的bug       ——  IE6、7  

    解决方法：  
        第一种：为父子元素添加定位    
        第二种：为input添加浮动      
——input边框去除：  

    解决方法：       —— IE6  
        第一种：添加border：0；      【强烈推荐】  
        第二种：添加border：none；    【有些小的问题，需要配合background-color：#fff或其他色使用】  

9、z-index问题 ——IE5\6\7
——添加两个兄弟元素。并为第二个兄弟添加一个子元素。并对两个兄弟绝对定位。
——当对第一个兄弟元素z-index后，第二个兄弟元素没有设置z-index。那么第二个兄弟元素的子元素设置z-index无效。即使第二个兄弟元素设置了z-index，如果小于第一个兄弟设置的z-index的值同样效果。
——解决方法：为第二个兄弟元素也设置一个z-index，并且保证其值大于第一个兄弟元素设置的z-index值；

10、a链接的状态顺序

11、select浮起问题 ——IE6

—— 在一个form（表单）中添加一个select  
—— 在为form添加一个兄弟元素div，并为其添加一个子元素div（添加些文本内容）  
—— 为父子div添加绝对定位。到IE6下发现问题。  
——在浮动的父元素中添加IE添加注释，并在其内添加一个空浮动框架。问题解决！  

12、png图片背景透明问题 ——IE6

——添加一个div包含一个img（png透明图片） 为div添加一个合适的样式；到ie6下发现问题；  
——引入指定插件  
——添加ie6条件注释，并添加js语句：  xx.fix('指定元素的选择器')；  

“text/javascript”>
js文件名.fix(‘img[,选择器1,选择器2,…]’);

——完美解决，哈哈;