Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haizhilin2013 opened this issue Jul 6, 2019 · 4 comments
Open
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@xiangshuo1992
Copy link
Contributor

xiangshuo1992 commented Jul 8, 2019

把以前兼容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
Copy link

awaity commented Jul 11, 2019

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

@kruzabc
Copy link

kruzabc commented Jan 8, 2020

我申明:我直接放弃本题!

@smile-2008
Copy link

把以前兼容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;来定位

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

5 participants