你的位置:首页 > 网页设计

[网页设计]ie下面兼容性问题的一些总结


 最后一次搞ie兼容性问题,以后都可以不管了0.0

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包起来

 1 <style> 2  3 .wrap{ width:300px;} 4  5 .left{float:left;} 6  7 .right{width:300px;float:right;} 8  9 </style>10 11 <div class="wrap">12 13   <div class="left"></div>14 15   <div><!-- IE6下的文字溢出BUG --><span></span></div>16 17   <div class="right">范德萨范德萨范德萨</div>18 19 </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 >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%;