浏览器兼容问题

1.在IE6以下,子级的宽度会撑开父级的宽度,所以在ie6,盒模型(内容+padding)的尺度一定不能大于父级宽度

2.IE6中,元素度浮动,如果块元素宽度需要内容撑开,需要给里面的块元素都添加浮动才可以,不然不浮动的块元素宽度与最外面父级元素的宽度相等

3.在ie6 下.如果要让两个两盒同排元素并排,让两个盒子都浮动即可,不能一个浮动,另一个用margin-left会出现3px里面的间隙

4.p标签不要嵌套块级元素,例:一个p标签嵌套一个div,给p标签设置宽高,则会出现两个p标签

5.在ie6下,最小高度的问题:元素的高度如果小于19px,会默认当成19px,解决方法就是加一条overflow:hidden;

6.ie6不支持的1px的边框

7.hasLayout:在IE下,大部分兼容性都是因为hasLayout属性的触发问题,尽量触发hasLayout属性可以减少很多IE下的兼容问题

在IE7以下下父级有边框的时候,子元素的margin会失效:解决方法,触发父级的hasLayout属性,加父级添加一条zoom:1;属性

8.ie6下双边距的bug

在ie6块元素浮动,有横向margin值时,如left或者right则margin-left和margin-right的值会变成两倍,解决办法:display:inline;转换成行内元素就没有双边距的问题了

9.在ie6,7下,li本身没有浮动,li里面的内容有左右浮动,li会产生一个间隙

解决办法:1给li加浮动;2给li加vertical-alingn:top;

在IE6下.最小高度和li的间隙问题共存的时候,解决li的间隙问题只能给li加浮动来解决

10.在IE6中,当一行字级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况时候,最后一行的子级的margin-bottom或失效,目前无解决办法

11.在ie6下,的文字溢出bug,子元素的宽度和父级的宽度如果相差小于3px,两个浮动元素中间有注释或者内联元素,就会有文字溢出

解决办法,用div吧注释或者内联元素包起来

定位bug

12.在ie6下,当浮动元素和绝对定位元素是兄弟关系的时候,绝对定位会失效

解决办法:不让浮动元素和绝对定位元素是兄弟关系,用div获取其他标签包裹起来

13.再ie6,7下子元素有相对定位,父级的overflow:auto失效,

解决办法,给父级也添加一个相对定位

14. 在ie6下,如果绝对定位的父级宽高是奇数的时候,子集元素的right和bottom的值会有1px的偏差,没有解决办法,只能避免

15.ie6.7.8对opacity无效,

解决办法:在加一行filter:alpha(opacity=n);n取值0-100

16.ie6下opsition:fixed设置无效,

解决可以用js来控制固定定位

表单bug

17.在ie6.7下,输入型的表单标签控件上下会有1px的间隙.

解决犯法给input加浮动;

18.条件注释语句,正对ie6,7,8单独的写法

你可能感兴趣的:(浏览器兼容问题)