ie下面兼容性问题的一些总结（转）

Posted 2020-08-23 longzl

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="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%;