CSS在IE和Firefox中的误区及区别

1. 对高度的解析 
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度 
Firefox:没有定义高度时,如果内容中包括了图片内容,Firefox的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。 
结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!
2.布局问题 
当你在写css的时候,特别是用float: left(或right)排列一窜图片时,会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束,都无济于事。 
其实这里还有另外一个问题,就是IE对于空格的处理,firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写,中间不要有回车或者空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。 
非常不走运的是我又碰到了这样的问题,多个img标签连着,然后定义的float: left,希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。 
后来的解决方法是在img外面套li,并且对li定义margin: 0,这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。 
这只是一些简单的区别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现. 

3.鼠标样式 
firefox不支持hand,但ie支持pointer 
解决方法: 统一使用pointer 

4. padding 问题 
padding 5px 4px 3px 1px FireFox无法解释简写, 
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px; 

5. 消除ul、ol等列表的缩进 
消除ul、ol等列表的缩进样式应写成:list-style:none;margin:0px;padding:0px; 
其中margin属性对IE有效,padding属性对FireFox有效 
6. CSS透明 
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 
FF:opacity:0.6。
8. CSS圆角 
IE:不支持圆角。 
FF: -moz-border-radius:4px,或者 
-moz-border-radius-topleft:4px; 
-moz-border-radius-topright:4px; 
-moz-border-radius-bottomleft:4px; 
-moz-border-radius- bottomright:4px;。
9. CSS双线凹凸边框 
IE:border:2px outset;。 
FF: 
-moz-border-top-colors: #d4d0c8 white; 
-moz-border-left-colors: #d4d0c8 white; 
-moz-border-right-colors:#404040 #808080; 
-moz-border-bottom-colors:#404040 #808080; 
10. 滤镜 
IE中支持使用滤镜,而Firefox中不支持. 

11. 禁止选取网页内容: 
在IE中一般用js:obj.onselectstart=function(){return false;}; 
而firefox用CSS:-moz-user-select:none; 
原文地址:https://www.cnblogs.com/zcttxs/p/3054764.html