[css] 第82天 写出你遇到过IE6/7/8/9的BUG及解决方法

[haizhilin]

第82天 写出你遇到过IE6/7/8/9的BUG及解决方法

[Luke.Deng]

把以前兼容IE6.7学习的东西搬出来了，还以为不见了。

兼容性问题
1.IE6margin双边距问题
2.IE67 li间隙问题
3.图片间隙问题——vertical-align：top
4.ie6下高度小于19px处理成19px；font-size:0;或者overflow：hidden
5.ie8以下滤镜问题，filter:alpha(opacity=50)
6.IE6 position:fixed 不兼容，fixed定位ie6兼容，js处理，通过获取滚动高度，赋值给需要固定的元素，设置绝对定位，设置top
7.ie6下父级的overflow：hidden是保不住子级的相对定位的（relative）-解决，给父级加定位
8.ie6下，绝对定位的父级，宽高是奇数的话，定位偏移会出现1px的偏差
9.ie6下，内容会撑开设置好的宽度
10.ie6，7 3px问题
11.<p><h3></h3></p>会把p元素分割成两个，原因，嵌套的规范性，p需要嵌套inline元素
12.在ie6下，1px dotted #000 不兼容。精度问题，可以用背景平铺
13.ie6下margin传递需要触发haslayout，父级有边框时，子元素margin值消失，解决办法，触发父级haslayout
14.ie6下当一行子元素占有的宽度之和与父级的宽度相差超过3px或者有不满行状态的时候，最后一行子元素的下margin就会失效
15.ie6下的文字溢出bug 条件1，子元素的宽度和父级的宽度相差小于3px的时候，2，两个浮动元素中间有注释或内联元素——解决办法：用div吧注释或内联元素包裹起来
16.ie6下，当浮动元素和绝对定位元素是并列关系的时候，绝对定位会消失，解决办法：给定位元素外面包裹div
17.ie6，7下，输入类型的表单控件上下各有1px的间隙——解决办法：给input加浮动
18.ie6，7下，输入类型的表单控件加border：none无效，还是会出现边框——解决办法：1，给border：0；2，重置input的背景
19.ie6，7下，输入类型的表单控件输入文字的时候，背景图片会跟随移动——解决办法：把背景加给父级
20.处理ie6 png图片兼容问题js插件，DD_belatedPNG.js,也可以用CSS滤镜处理
a.css处理
b.微软behavior扩展，下载iepngfix.htc
c.js插件
21.css hack \9——IE10之前的浏览器解析，+，*——IE7包括IE7之前的浏览器解析， _ ——IE6包括IE6之前的IE浏览器
22.important兼容问题，在IE6下，在important后面加一条同样的样式，会破坏important优先级作用，按照默认的优先级顺序来走
23.IE6 margin负值不兼容，处理，只要position：relative；这个解决方案在圣杯布局中有出现。圣杯布局，可以用position：absolute；来定位

[Awaity]

ie中a标签嵌套img时，会出现边框，border:0/none都可以，偶尔出现图片无法显示时，使用画板另存为下就好了，迷之原因

[kruz]

我申明：我直接放弃本题！

[Smile2008]

把以前兼容IE6.7学习的东西搬出来了，还以为不见了。

兼容性问题
1.IE6margin双边距问题
2.IE67 li间隙问题
3.图片间隙问题——vertical-align：top
4.ie6下高度小于19px处理成19px；font-size:0;或者overflow：hidden
5.ie8以下滤镜问题，filter:alpha(opacity=50)
6.IE6 position:fixed 不兼容，fixed定位ie6兼容，js处理，通过获取滚动高度，赋值给需要固定的元素，设置绝对定位，设置top
7.ie6下父级的overflow：hidden是保不住子级的相对定位的（relative）-解决，给父级加定位
8.ie6下，绝对定位的父级，宽高是奇数的话，定位偏移会出现1px的偏差
9.ie6下，内容会撑开设置好的宽度
10.ie6，7 3px问题
11.<p><h3></h3></p>会把p元素分割成两个，原因，嵌套的规范性，p需要嵌套inline元素
12.在ie6下，1px dotted #000 不兼容。精度问题，可以用背景平铺
13.ie6下margin传递需要触发haslayout，父级有边框时，子元素margin值消失，解决办法，触发父级haslayout
14.ie6下当一行子元素占有的宽度之和与父级的宽度相差超过3px或者有不满行状态的时候，最后一行子元素的下margin就会失效
15.ie6下的文字溢出bug 条件1，子元素的宽度和父级的宽度相差小于3px的时候，2，两个浮动元素中间有注释或内联元素——解决办法：用div吧注释或内联元素包裹起来
16.ie6下，当浮动元素和绝对定位元素是并列关系的时候，绝对定位会消失，解决办法：给定位元素外面包裹div
17.ie6，7下，输入类型的表单控件上下各有1px的间隙——解决办法：给input加浮动
18.ie6，7下，输入类型的表单控件加border：none无效，还是会出现边框——解决办法：1，给border：0；2，重置input的背景
19.ie6，7下，输入类型的表单控件输入文字的时候，背景图片会跟随移动——解决办法：把背景加给父级
20.处理ie6 png图片兼容问题js插件，DD_belatedPNG.js,也可以用CSS滤镜处理
a.css处理
b.微软behavior扩展，下载iepngfix.htc
c.js插件
21.css hack \9——IE10之前的浏览器解析，+，*——IE7包括IE7之前的浏览器解析， _ ——IE6包括IE6之前的IE浏览器
22.important兼容问题，在IE6下，在important后面加一条同样的样式，会破坏important优先级作用，按照默认的优先级顺序来走
23.IE6 margin负值不兼容，处理，只要position：relative；这个解决方案在圣杯布局中有出现。圣杯布局，可以用position：absolute；来定位