DIV下 火狐和IE的兼容问题.docVIP

DIV下 火狐和IE的兼容问题 DIV下：火狐和IE的兼容问题2010-06-17 15：57FF,IE兼容问题 相对来说，FF对CSS要求更严格一些。对FF来说，一般在属性后加！important就可以了，这样就对FF等浏览器重新定义了。有以下方面,都是从网上找的：FF：设置padding后,div会增加height和width,但IE不会,故需要用！important多设一个height和widthFF：支持！important,IE则忽略,可用！important为FF特别设置样式cursor：pointer可以同时在IE FF中显示游标手指状，hand仅IE可以FF：链接加边框和背景色，需设置display：block,同时设置float：left保证不换行。参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格在firefox和IE中的BOX模型解释不一致导致相差2px解决方法：{margin：30px！important；margin：28px；}注意这两个margin的顺序一定不能写反。！important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring：30px；margin：28px}--1、IE与Firefox下对CSS解析的区别对高度的解析IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！img对象alt和title的解析alt：当照片不存在或者load错误时的提示；title：照片的tip说明。在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用其他的细节差别当你在写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对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。2、嵌套DIV：父DIV的高度不能根据子DIV自动变化的解决方案div id=parentdiv id=content/div/div当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。解决方案div id=parentdiv id=content/div div style=font：0px/0px sans-serif；clear：both；display：block/div/div在层的最下方产生一个高度为1的空格，可解除这个问题3、CSS DIV一、基本上每个区块的div都要有自己的id，杜绝不同功能的区块用同一个id/class二、每个稍大的区块div后面都跟一个！--/id--标记开始、结束三、隐藏文字的又一种方法TEXT-INDENT：-9999px；LINE-HEIGHT：0四、巧妙地处理并列的两列：1)右列为P,width=44.5%,float=left左列为P.first,border-right：#a7a7a7 1px solid,width=45%2)右列#right,margin-left：50%左列#left,float=left,width=50%border-right：#a7a7a7 1px solid以上两种方法关键点在于选择其中一个为float=left五、随机的切换图片：#r