css解决浏览器兼容问题

《css解决浏览器兼容问题》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、6/6ØCSS1.cursor:hand  VS  cursor:pointerfirefox不支持hand，但ie支持pointer解决方法:  统一使用pointer2.innerText在IE中能正常工作，但在FireFox中却不行.  需用textContent。解决方法:if(navigator.appName.indexOf("Explorer")  >  -1){       document.getElementById('element').innerText  =  "my  text";}  else{       documen

2、t.getElementById('element').textContent  =  "my  text";}3.CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。4.css中的width和padding在IE7和FF中width宽度不包括padding，在Ie6中包括padding.5.FF和IEBOX模型解释不一致导致相差2pxbox.style{width:100;border1px;}ie理解为box.width=

3、100ff理解为box.width=100+1*2=102//加上边框2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;6.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:010px010px;}

4、div的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width/**/:340px;margin:010px010px}7.ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;经验证，在IE中，设置margin:0px可以去除列表的上下

5、左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px6/6后仅仅可以去掉左右缩进，还必须设置list-style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。1.元素水平居中问题FF:margin:0auto;IE:父级{text-align:center;}2.

6、Div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。3.margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：相应的css为#imfloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px

7、*/}4.IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}5.页面的

8、最小宽度如上一个问题，IE不识别min，要实现最小宽度，可用下面的方法：#container{