IE6的兼容性以及处理方法
Posted 韩金金金
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IE6的兼容性以及处理方法相关的知识,希望对你有一定的参考价值。
1. 当我们写了一段正确的代码,但是在不同浏览器下,产生一些不正确的解析,这叫做兼容性问题
2. 在IE6下 ,标准盒模型:
width/height = content;
可视宽/高 = content + padding + border;
怪异盒模型
width/height = 可视宽/高;
content = width - padding - border;
在老版本IE下,不设置文档声明,页面就会陷入怪异盒模型解析
3. 在IE6下,占位宽 = content + padding + border + margin;
子元素宽高超出父级的宽高,可以把父级设置好的宽高撑开.
4. 在IE6下,块属性元素的高度小于19px的时候,高度会按照19px来处理.
解决办法:overflow:hidden;
5. 在chrome下,文字大小小于12px的时候,会被当做12px来处理解决办法: 用图片代替;
6. 在IE6下,1px的点线会显示成虚线
解决办法: 用图片代替;
7. 在IE6下给边框加transparent的时候,border-style最好设置成虚线
8. 在IE6,7下,不支持给块标签加inline-block;
解决办法:
在inline-block下,添加以下代码*display:inline;*zoom:1;
9. 在高版本的IE中,新增的h5标签不被IE高版本辨认,需要调用已经创建好的标签对象
10. IE6下 只支持 link visited hover active 这四个伪类,
并且只支持添加给a标签IE7下 只支持 link visited hover active
解决办法:JS
11. 在IE6,7下浮动元素的父级设置了固定宽度的话,不需要清浮动
12. haslayout IE渲染引擎中的一个属性,用来调节元素的渲染模式,当我们把这个属性 设置为true的话,这个元素就跟根据自身的内容大小或者父级的大小,来重新计算自己的宽高.
* body and html
* table, tr, th, td
* img
* hr
* input, button, file, select, textarea, fieldset
* marquee
* frameset, frame, iframe
* objects, applets, embed
* 触发hasLayout的样式:
* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
14. 在IE6下,父级有边框的话,可能会造成子元素的margin失效
解决办法:触发haslayout;
15. IE6,7下给元素添加zoom 元素会支持宽高
*display: inline;
*zoom: 1;
*style 这条只在IE7及IE7之前的IE浏览器识别
16. 多个元素需要在行显示,最好给这行都加上浮动
17. 元素浮动之后,如果宽度可以固定,一定记得设置固定宽度
如果宽度需要内容撑开,就给它里边的块元素都加上浮动
19. IE6下双边距BUG
在IE6下,块元素有浮动有横向的margin,横向的margin值会被放大成两倍
解决办法: display:inline;
margin-left 一行元素左侧第一个元素有双边距
margin-right 一行元素右侧第一个元素有双边距
20. 在IE6下,一行元素的宽度之和 和 父级的宽度相差超过3px,则最后一行元素的下margin失效
解决办法:无
21. 在IE6下,元素的宽度,和父级宽度相差 小于3px,
并且两者浮动之后之间有注释或者内嵌元素,元素内容会被复制。
解决办法:可以用div把注释或者内嵌元素包起来
22. 在IE6,7下li本身没有加浮动,但是li的内容都浮动了,或者有两个以上的浮动,li下边就会有几个px的间隙。
解决办法:
1. 给li加浮动
2. 给li加vertical-align: top;
23. 在IE6下,当浮动元素和绝对定位元素,是同级关系的话(并且浮动元素的占位宽度 和父级小于3px),绝对定位元素会消失掉
解决办法:
把绝对定位元素单独包起来。
24. 在IE6下,父级的宽高是奇数的话,元素的right值和
bottom值会有1px的偏差.
解决办法: 无;
25. 在IE6,7下,子元素有相对定位的话,父级的overflow包不住它
解决办法: 给父级也加相对定位;
26. IE6不支持固定定位
解决办法
html {
height: 100%;
overflow: hidden;
position: relative;
}
body {
height: 100%;
overflow: auto;
margin: 0;
}
27. 在IE6(IE8及IE8之前的IE浏览器),不支持opacity
解决办法: filter: alpha(opacity = 40);
28. 在IE6,7下,不支持border-spacing这条样式
解决办法:
1. border-collapse: collapse;
2. cellspacing
29. 在IE6,7下input上下各有1px的间隙
解决办法: 给input加浮动
输入类型
input type = "text"
input type = "password"
textarea
30. 在IE6,7下输入类型表单控件上下各有1px的间隙
解决办法: 给控件加浮动
在IE6,输入类型表单控件border:none;无效
解决办法:
1. border:0;
2. 重置input的背景
31. 在IE6,7下,输入类型的表单控件,输入文字的时候,背景图会随着文字一块移动
解决办法:背景图加给父级
32. /*
\0 IE8,IE9,IE10,IE11
\9 IE10及IE10之前的IE浏览器
*,+ IE7及IE7之前的IE浏览器
_ IE6及IE6之前的IE浏览器
*/
33. 条件注释语句: 符合条件之后,
浏览器会把对应的注释中的内容解析出来
只在IE9及IE9之前的IE浏览器支持
34. IE6不支持PNG24的透明度
解决办法:JS 或者换格式
35. @import 不推荐使用
在样式表中引入新的样式表
并发加载
link
@import 必须写在样式表的最前边
36. !important 提升样式优先级
在IE6下,如果在!important下边再加一条同样的样式,会破坏掉!important,然后按照默认的优先级顺序显示
37. 在IE6下,通过margin负值,使元素移出父 级的区域,会被父级截掉
解决办法:给元素加相对定位
以上是关于IE6的兼容性以及处理方法的主要内容,如果未能解决你的问题,请参考以下文章