前端常见兼容性问题笔记

计算一定要精确

ie6子元素会撑开父级设置好的宽高

会出现兼容性问题 所以要计算好padding值

不要让内容的宽高超出父级设置的宽高

 

在ie6、7下元素浮动，

如果宽度需要内容撑开，就给里面的块元素都加浮动。

ie67下元素要通过浮动并列在一行就要都给元素加浮动  不然会出现兼容性问题

标签嵌套规范   内联不能嵌套块状

ie6最小高度问题 overflow解决

1px dotted 在ie6下不支持  解决  切背景平铺

margin 传递   浮动或者有宽高 或者

 

在ie6下解决margin传递要触发haslayout

在ie6下父级有边框的时候子元素margin值消失 

解决 触发haslayout 尽量触发

ie6只支持 a标签的四个伪类[伪元素]

inline-block  ie6不支持块标签

 

浮动:

1.双倍边距bug        块 浮动 横向margin         display：inline 

2.li本身没浮动内容浮动 ie6 li 内容浮动            给li加浮动     li加vertical-alian

其实就是浮动块状元素前面不能有内联文本的出现

 

 

ie6 下，下margin消失

当一行子元素占有的宽度之和和父级的宽度相差超过3px，或者有不满行状态的时候最有一行的子元素的下margin值就会失效、

 

ie6下文字溢出bug

原因 1.浮动元素前面有注释 或者内联元素

内联元素越多，溢出越多

子元素的宽度和父级的宽度相差小于3px的时候

解决办法用div包起来 或者把父级元素宽度调大

 

当浮动元素和绝对定位是并列关系的时候 绝对定位元素  会消失掉

解决办法给绝对定位元素套一层  包一个div 取消并列关系

 

相对定位:

在ie六下  元素有相对定位的话 父级的overflow 就包不住子级

解决办法 ：给父级也加相对定位

绝对定位

在ie6下定位 元素的父级宽高是奇数的时候元素right 和bottom值会有1px的偏差 没办法解决尽量避免

固定定位 ie6不兼容。

 

表单元素

ie7 6下输入类型表单控件

上下有1px的间隙问题

解决:给input加浮动

boder:none失效

解决:input重新设置下背景 白色也设置下

输入文字把背景图挤出去

解决:把背景加给父级  清除自身背景 background:none;

-------------------------------------------------------------------

png问题 js文件解决

 

条件注释语句:

css  hack

important

 

margin负值  在ie6下超出父级 就被截掉

然后相对定位就可以解决

圣杯  据对定位

、等高布局