css与javascript跨浏览器兼容性总结

《css与javascript跨浏览器兼容性总结》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、css与javascript跨浏览器兼容性总结一、CSS样式兼容性1.float闭合（clearingfloat）网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话，父div无法包住整个子div,这种情况一般出现在一个父div下包含多个子div。解决办法：1）给父div也设上float2）在所有子div后新加一个空div（目前ext是这么做的），比如：.parent{width:lOO

2、px;}.sonl{float:left:width:20px;}.son2{float:left;width:80px;}.clear{clear:both;margin:0;pardingO;height:0px;font~size:0px:}It;divelass=parentgt;lt;divclass=sonlgt;It;/divgt:It;divc1ass=son2gt;It;/divgt;It;divclass=cleargt:1t:/divgt:It:/divgt;3）万能float闭合将以下

3、代码加入globaless中，给需要闭合的div加上class=”clearfix”即可，屡试不爽。It;stylegt:/*clearfix*/.clearfix:after{content:.:display:block;height:0;clear:both;visibility:hidden;.clearfix{display:inline-block;}Ahidefromiemac*/.clearfix{display:block;}/氺endhidefromiemac*/Aendofclearfi

4、x*/It;/stylegt;:after（伪对象），设置在对象后发生的内容，通常和content配合使用，ie不支持此伪对象，非ie浏览器支持，所以并不影响到ie/win浏览器。这种的最麻烦。4）overflow:auto只要在父div的css中加上overflow:auto就搞定举例:.parent{width:100px;overflow:auto}.sonl{f1oat:left;width:20px;}.son2{float:left;width:80px;}1t;divclass=parentgt

5、;It;divelass=sonlgt:It:/divgt;It:divclass=son2gt;It;/divgt;It;/divgt;原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见w3c的解释）。现在只要将给外围元素添加一个“overflow:auto”，就可以解决问题，结果是除了ie，真的可以解决。下来就要解决ie的问题了，再加上“Jieight:l%”，这个问题就完全解决了。我试了一下，其实不加_height:l%“在ie下也行留着吧。2.截字省略号

6、•hh{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap:overflow:hidden;这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意firefox并不支持It;metahttp-equiv=x-ua-compatiblecontent=ie=7/gt;页面加上这句就可以让页面兼容ie7了供参考！给大家提醒一个漂浮需要注意的问题注意设置div宽和高注意设置overflo

7、w:hidden;注意闭合针对火狐父div样式display:inline-block;2.cursor:hand和cursor:pointerfirefox不支持hand，但ie支持pointer解决方法：统一使用pointer4.css透明几款浏览器对透明度的支持方式各不相同，为了保证在ie，firefox，chrome,safari等主流浏览器下都能正常显示透明度的效果，我们可以定义一个透明度的class,因为一写就要写3条，省的每次都复制来复制去了。具体代码如下：.transparent{filter

8、:alpha(opacity=60):/*支持ie浏览器*/-moz-opacity:0.6;/*支持firefox浏览器*/opacity:0.6;/*支持chrome,opera,safari等浏览器*/}5.css中的width和padding在ie7和ff中width宽度不包括padding，在ie6中包括padding。二、javascript兼容1.children与childnodes