IE6、7各种问题及解决方案

1、IE6的双倍边距BUG
问题：IE6中，浮动到父元素边上元素，如果具有margin值，margin值会以双倍显示

解决：为浮动元素添加属性_display:inline;

2、IE6中li元素的垂直间隙
问题：IE6中li的子元素浮动的时候，li之间会产生垂直间隙，撑开ul使高度增加

解决： 方法(1)为li添加浮动,li {float:left/right;}
方法(2)定义li元素的垂直对齐方式,li {vertical-align:middle;}//其他也可以;

3、IE6-7下display:inline-block无效

解决： { *display: inline; *zoom:1; }

4、IE6浮动元素与非浮动元素相邻的3px间距bug
解决：为浮动元素添加一个-3px的margin值，如元素左浮动时：{_margin-right:-3px;}

5、IE6及更早浏览器，只有a元素支持:hover属性

解决：JS添加

6、IE6中定位位置错误
问题：父级(position:relative;)失效，那么在ie6中“绝对定位容器”的left和bottom就会有问题。
（PS:top和right表现正常）

解决：在“相对定位的父容器”上加入 zoom:1

7、在IE6-7下父级的overflow包不住相对定位子元素
问题：在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

解决：方法（1）给父级也加相对定位,即：父级{position:relative;}
方法（2）在父窗口加上overflow：auto；_zoom：1

8、IE6中绝对定位1像素偏差
问题：IE6下父级参照物宽高为奇数时，绝对定位元素设置了right和bottom为0或者left和top为100%时，仍会有1px的空隙

解决：参照物宽高设置为偶数（只有偶数才行）

9、IE6-7中表单元素偏离
问题：当某些“表单元素”的“父元素上触发了haslayout”后，这些表单元素会以上一级“元素上的margin-left值”偏离

解决：方法（1）表单元素添加margin-left负值
方法（2）在表单元素外面添加一个div

10、IE6中定位元素消失
问题：ie6中，当容器子元素中同时具有具有浮动元素和绝对定位元素时，绝对定位的子元素会消失

解决：方法（1）绝对定位元素设置清楚浮动clear:both;如果浮动元素在文档顺序上排列在绝对定位元素之后，
还要为浮动元素设置{_margin-right:-3px;}同问题4；
方法（2）避免定位元素与浮动元素同级，此处将span元素嵌套到另一个元素内

11、IE6-7的a链接失效
问题：ie6、7，对于，有时span触发了a属性，那么图片区域将点击无效

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

扩展问题：超链接hover：点击后失效

使用正确的书写顺序 link visited hover active

12、IE6 overflow:visiable;会撑开容器//ie6无解、不支持用overflow:hidden来清除浮动，

解决：_zoom:1清除浮动;overflow:hidden;的主要用途是溢出隐藏。

扩展问题：IE float浮动 子元素不能撑开父容器
方法（1）.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 但是它不能通过w3c，所以我们可以用条件注释，才可以通过*/
.clearfix {
zoom:1; /针对IE/
}
方法（2）/* 分别在两段 css 块中设置 这样可以不必使用zoom:1;又通过W3C，又不需要用条件注释*/
.clearfix{display: block;
}
或者
/* 或者给父容器height:1% 因为1%并不会改变实际高度 这样也可以通过W3C */
.clearfix {
height:1%;
}

13、IE6-7 下不支持fixed

解决：方法（1） _position:absolute;
_top:expression(eval(document.documentElement.scrollTop+100));
方法（2）用JS代替

14、IE6最小高度

解决：IE6下最小高度19px, 加上overflow: hidden; 可解决最小高度问题

15、IE6下input标签会留有空隙

解决：给input加浮动

16、IE6input输入类型表单背景图片会移动
问题：在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动。

解决：方法（1）背景图片设置fixed属性_background: url(“X.jpg”) no-repeat fixed;
方法（2）把图片加给父级

17、IE6下溢出问题
问题：当浮动元素之间出现内联元素或注释并且宽度与父元素相差3px以内时，会溢出

解决：避免使用,即：父元素-子元素>3像素，或者overflow: hidden;应该也可以

扩展问题：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

解决：给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
clear:left:清除左浮动 clear:both:清除两边的浮动

18、IE6不支持最少最低宽高

解决：{ _width:
expression(document.body.clientWidth < 300 ? “300px” ? document.body.clientWidth > 600 ? “600px” : “auto”)); } {
_height: expression( this.scrollHeight < 200 ? “200px” : ( this.scrollHeight > 400 ? “400px” : “auto”)); }

19、IE6不支持边框点线仅仅dotted 1px

解决：切图片做背景

20、IE6图片下的间隙

解决：img加上 display: block; vertical-align:top;

21、ie6-8不支持opacity，rgba

解决：filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70)progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9,endColorstr=#A9A9A9);

22、select在IE6下，遮盖挡不住select

解决：使用iframe嵌套弹出内容

23、IE6表单控件加border:none无效
问题：在IE6，7下输入类型的表单控件加border:none无效。

解决：重置input的背景，就是加上背景色

24、IE6下png显示不透明
问题：ie6不支持png24的图片

解决： 方法（1）使用png8格式图片
方法（2）js解决：DD_belatedPNG_0.0.8a.js；DD_belatedPNG.fix(’.box’);

25、IE6没有办法定义1px左右的高度容器

解决：verflow:hidden; zoom:0.08; line-height:1px;

26、IE6下tr和tbody或者thead同时加样式，tr样式会覆盖掉tbody和thead的样式

解决：不要tr加样式同时再去加tbody和thead样式

27、IE6下margin：0 auto无法居中

解决：对其父容器使用

…

一行代码解决IE6~IE8以及IE兼容模式下的兼容问题

<meta http-equiv=“X-UA-Compatible” content=“ie=edge,chrome=1” />

/ CSS属性级Hack /
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 /
color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
[color:red; / IE6、IE7 识别 /
color:red\9; / IE6、IE7、IE8、IE9 识别 /
color:red\0; / IE8、IE9 识别/
color:red\9\0; / 仅IE9识别 /
color:red \0; / 仅IE9识别 /
color:red!important; / IE6 不识别!important 有危险*/

/ CSS选择符级Hack /
html #demo { color:red;} / 仅IE6 识别 */
+html #demo { color:red;} / 仅IE7 识别 /
body:nth-of-type(1) #demo { color:red;} / IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 /
head:first-child+body #demo { color:red; } / IE7+、FF、Chrome、Safari、Opera 可以识别 /
:root #demo { color:red\9; } : / 仅IE9识别 */

/ IE条件注释Hack /
<!-[if IE 6]>此处内容只有IE6.0可见<![endif]->
<!-[if IE 7]>此处内容只有IE7.0可见<![endif]->

暂时先这样，尽量完善++