• 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; 
    
  • 相关阅读:
    【读书笔记】MSDN 上关于加密解密的一个例子
    【读书笔记】创建泛型编程类 由链表而深入
    HDFS数据加密空间Encryption zone
    各种数据库的连接方法
    Java基础5
    Java基础4
    Java基础2
    博客优化、收录、RSS技巧
    Java基础3
    Java基础8
  • 原文地址:https://www.cnblogs.com/zcttxs/p/3054764.html
Copyright © 2020-2023  润新知