CSS解决浏览器兼容问题.docVIP

CSS cursor:hand?? VS?? cursor:pointer firefox不支持hand，但ie支持pointer解决方法:?? 统一使用pointer innerText在IE中能正常工作，但在FireFox中却不行.?? 需用textContent。解决方法:if(navigator.appName.indexOf(Explorer)?? ?? -1){??????? document.getElementById(element).innerText?? =?? my?? text;}?? else{??????? document.getElementById(element).textContent?? =?? my?? text;} CSS透明 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 css中的width和padding 在IE7和FF中width宽度不包括padding，在Ie6中包括padding. FF和IE BOX模型解释不一致导致相差2px box.style{width:100;border 1px;} ie理解为 box.width = 100 ff理解为 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; IE5 和IE6的BOX解释不一致 IE5下div{width:300px;margin:0 10px 0 10px;}div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} ul和ol列表缩进问题 消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 元素水平居中问题 FF: margin:0 auto; IE: 父级{ text-align:center; } Div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： div id=”imfloat” 相应的css为 #imfloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}htmlbody #box{ width: auto; height: auto;