首页 > 代码库 > ie下面兼容性问题的一些总结（转）
ie下面兼容性问题的一些总结（转）
1.浮动兼容性
1.1IE6下的双边距BUG
在IE6下，块元素有浮动和横向margin的时候，最边上元素的横向margin值会被放大成两倍
解决办法: display:inline;
1.2IE6，7下li的间隙
在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生4px的间隙
解决办法: 1.给li加浮动（但是width就变为由自适应内容，所以还要加宽度）
2.给li加vertical-align:top/middle/bottom;
ps:当li间隙问题，和最小高度问题都在时，只能用给li加浮动方法。
1.3ie67清除浮动需要触发haslayout才可以
.clear:after{content:‘‘;display:block;clear:both;}
.clear{zoom:1;}
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
1.4ie6，7下左边元素浮动，右边元素通过margin并到一行，会出现3像素bug。
解决方法：通过浮动并在一行
1.5当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
解决办法:
给定位元素外面包个div
1.6在IE6下的文字溢出BUG
子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素的时候，ie6下文字会溢出
解决办法:用div把注释或者内嵌元素用div包起来
<style>
.wrap{ width:300px;}
.left{float:left;}
.right{width:300px;float:right;}
</style>
<div class="wrap">
<div class="left"></div>
<div><!-- IE6下的文字溢出BUG --><span></span></div>
<div class="right">范德萨范德萨范德萨</div>
</div>
2.定位问题
2.1ie6下面父级一定会包含住子级，当子级高度比父级高时，子级会把父级高度撑开
解决方法：给父级加overflow：hidden；
问题：当子级有position：relative；时，父级的overflow是包不住子级的relative的。（解决方法：给父级也加一个position；）
2.2position:absolute;宽高奇数问题
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
2.3固定定位ie6下不兼容
3.表单问题
3.1在IE6，7下输入类型的表单控件上下各有1px的间隙
解决办法:给input加浮动
3.2在IE6，7下输入类型的表单控件加border:none;
解决办法: 重置input的背景或者border:0;
3.3当inline-block与text-indent在IE6、7下相遇后
text-indent为负时，元素向左偏移，text-indent为正时，元素向右偏移。在这种情况下，元素的偏移量由text-indent和margin值决定，如：margin-left:-10px; text-indent:10px相当于margin-left:0; text-indent:0元素没有偏移。
input、select、button、textarea的默认display皆为inline-block。
解决方法一：ie67，用display：block;
解决方法二：用padding代替text-indent；
3.4ie6下面input背景图片滚动
解决方法：在外面套一层div，背景图片写在div里面，input背景透明或无。
3.5ie6下面label（radio、checkbox）不加for属性没有效果
<label><input type="checkbox" id="man">man</label>
3.6ie6下面textarea默认有滚动条
解决方法：textarea{overflow:auto;}
4.图片下方间隙问题
a、display:block; (改变标签本身特性)
b、vertical-align (完美方案)
5.ie6下最小高度问题
Ie6下最小高度小于20px会解析为20px
解决方法:
height:1px;overflow:hidden;
6.ie6body高度的问题
<div class="wrap"> 2 <ul> 3 <li>fdasfd</li> 4 <li>fdsfds</li> 5 <li>fdfds</li> 6 </ul> 7 </div>
1 .wrap{
2 width:800px;
3 height:200px;
4 margin:200px auto;
5 border:1px solid red;
6 position:relative;
7 overflow: hidden;
8 }
9 .wrap ul{
10 float: left;
11 position: relative;
12 left:50%;
13 top:50%;
14 border:1px solid red;
15 height:100px;
16 }
17 .wrap li{
18 float: left;
19 width:100px;
20 height:100px;
21 background:red;
22 position: relative;
23 left:-50%;
24 top:-50%;
25 margin-left:10px;
26 list-style: none;
27 _display:inline; /*ie6双边距*/
28 *overflow: hidden;/*ie7下面不支持宽度*/
29 }
在上面这个水平垂直居中浮动元素的时候遇到一个问题，就是如果不给ul加高度，那么li下面的top:-50%失效，为什么？
原因：一个对象是否可以使用百分比显示，取决于对象的父级对象
怎么才能支持百分比呢：
一般来说，要满足两个条件：
其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；
其二，标签本身的属性，如果内联元素，则需要有浮动，绝对定位，固定定位之类属性让他支持宽高；
上面li的向上偏移是相对于ul的，而ul没有高度，所以li就向上偏移不了。
同理，我们要做一个遮罩层{position:absolute;top:0;left:0;height:100%;width:100%;background:#000;opacity:0.3;filter:alpha(opacity:30);}，需要给该遮罩层设置宽高100%，在ie67下面，虽然遮罩层的offsetParent（定位父级）是html，但是浏览器默认状态 下，是没有给body一个高度属性的，因此我们不给body设置height的话，遮罩层的高度也就不能用，所以当我们给遮罩层设置height:100%;时，不会产生任何效果，而当我们给body设置了100% 之后，遮罩层的height:100%便发生作用了。所以我们需要给ie6下面的body{height：100%；}
7. 1px dotted red;在ie6下不支持，表现的和1px dashed red一样
解决方法：切背景平铺（就用dashed挺好看的）
8.在IE6下解决margin传递要触发haslayout
在IE6下父级有边框的时候，子元素的margin值消失
解决办法:触发父级的haslayout：zoom:1;
9.ie6下伪类只支持a标签
注意书写顺序：a:link a:visited a:hover a:active
10.ie6当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效
11.透明度opacity，ie8 以下不兼容
filter：alpha（opacity：）；
12.ie6下png不支持
解决方法：js、滤镜（_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.mamicode.com/XX.png", sizingMethod="crop");）
13.ie67非法嵌套的标签会被异常处理
如：ul>li*4+p
在标准浏览器下面p标签和li为兄弟关系
Ie67下：p标签会被li吃掉，变为父子关系
14.ie67下面内容高度没有屏幕高时，也会有滚动条
解决方法：overflow:auto;
15.IE6/7:躲猫猫bug
产生条件1：一个浮动元素后面跟着一个非浮动元素，接着是一个清理元素，所有元素都包含在一个有背景色或背景图片的父元素中。
解决办法：
1.不要在父容器里面使用背景或图片（要必须有背景的话，这个当然这个不是可行的）。
2.给容器指定一个行高。
3.将浮动元素和容器元素的position属性设置为relative。
产生条件2：一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的 链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
解决方法：
1.在（那个未浮动的）内容之后添加一个<span style=”clear: both;”> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;
ie下面兼容性问题的一些总结（转）