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