• 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; 
    
  • 相关阅读:
    [BJOI2019] 光线
    C# 从零开始写 SharpDx 应用 笔刷
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    PowerShell 拿到显卡信息
    PowerShell 拿到显卡信息
    win10 uwp 如何使用DataTemplate
    win10 uwp 如何使用DataTemplate
  • 原文地址:https://www.cnblogs.com/zcttxs/p/3054764.html
Copyright © 2020-2023  润新知