跨浏览器兼容性总结

ID：33061331

大小：372.86 KB

页数：12页

时间：2019-02-19

资源描述：

《跨浏览器兼容性总结》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

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

2、t:left;width:20px;}.son2{float:left;width:80px;}.clear{clear:both;margin:0;pardingO;height:Opx;font-size:Opx;}

3）万能float闭合将以下代码加入GlobalCSS中,给需要闭合的div加上class』'c

3、learfix”即可,屡试不爽。/*ClearFix*/•clearfix:after{content:n.n;display:block;height:0;clear:both;visibil.ity:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/:after（伪对象），设置在对象后发

4、生的内容，通常和content配合使用，IE不支持此伪对象，非le浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。4）overflow:auto只要在父DIV的CSS中加上overflow:auto就搞定。举例：•parent{width:lOOpx;overflow:auto}.sonl{float:left;width:20px;}.son2{float:left;width:80px;}

5、s=,fson2nx/div>

6、lipsis;white-space:nowrap;overflow:hidden;}这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意Firefox并不支持。页面加上这句就可以让页面兼容IE7了供参考！给大家提醒一个漂浮需要注意的问题注意设置DIV宽和高注意设置overflow:hidden;注意闭合针对火狐父div样式display:inline-blo

7、ck;2.cursor:hand和cursor:pointerfirefox不支持hand,但ie支持pointer解决方法：统一使用pointer3.CSS透明几款浏览器对透明度的支持方式各不相同，为了保证在IE,Firefox,Chrome,Safari等主流浏览器下都能正常显示透明度的效果，我们可以定义一个透明度的class,因为一写就要写3条，省的每次都复制來复制去了。具体代码如下：•transparent{filter:alpha(opacity=60);/*支持IE浏览器★/-moz-opac让

8、y:0.6;/*支持FireFox浏览器★/opacity:0.6;/★支持Chrome,Opera,Safari等浏览器*/}1.css中的width和padding在IE7和FF中width宽度不包括padding,在Ie6中包括paddingo具体参见附录1第一节理解CSS盒子模型更多参见附录1：跨浏览器兼容的CSS编码准则和技巧二、JavaScript兼容1.children与childNodesIE提供

跨浏览器兼容性总结

跨浏览器兼容性总结

相关文章

相关标签