html css js 基础二（兼容性）

一：兼容性

1:ie67下要支持inline-block   需要给div加上display:inline-block;的基础上再加上

*display:inline; *zoom:1;

div{display:inline-block;*display:inline; *zoom:1;}

2:ie6 7 下解决最小高度设置（1px = 19px）

解决方法是 overflow:hidden;  div{height:1px;background:red;overflow:hidden;}

3:ie6 7下margin-left会产生双边距 *display:inline;

div{width:100px;height:100px;float:left;margin-left:50px;*display:inline;}

4:ie6 7下li和li之间会产生一个4px的距离 解决办法是：*vertical-align:top;

.list li{height:30px; border:1px solid red; line-height:30px; *vertical-align:top;}

5:ie6 7下文字溢出bug，（两个浮动元素之间有内联元素或者是注释并且和父级宽度相差超过3px就会出现文字溢出）

<div class='wrap'>

<div class='left'>1</div><span></span>

<div class='right'>2</div>

</div>

.wrap{width:400px;}

.left{float:left;}

.right{float:right;}

解决办法：1：两个浮动元素之间避免出现内联元素或者注释

                    2：修改子级宽度，与父级宽度少3px以上  例如：

                    .wrap{width:400px;}   .right{float:right; width:396px;}

6:ie6 7下子div的宽高大于父级的div 并且子级有position:relative;的时候，会出现父级保不住子级的问题。解决方案是：针对ie67 给父级元素添加相对定位：position:relative;

7:ie6 7下父级元素的宽高是奇数且父级有定位的时候，绝对定位的right和bottom会出现1px偏差；

解决办法，避免父级元素宽高设置为奇数；

8：ie6 7下绝对定位元素和浮动元素并列的时候，绝对定位元素消失。

解决办法是：浮动元素和绝对定位元素是同级的话，只要让他们俩不出于同级也就是给其中一个加一级元素把这个元素包住就可以了。

9：ie6 7下 input间隙的问题 给input框加上浮动 *floa:left;

10:ie6 7下输入类型表单控件背景 设置background-attachment:fixed;