IE与Firefox下对CSS解析的区别 - 定义div高度firefox解析问题.doc

IE与Firefox下对CSS解析的区别 - 定义div高度firefox解析问题IE与Firefox下对CSS解析的区别 - 定义div高度firefox解析问题1、IE与Firefox下对CSS解析的区别,这是我在使用中的一些经验，拿出来和大家分享，希望大家继续2 R b8 c- K2 Q6 `对高度的解析5 y+ b% B8 k+ Y! E [- H! KIE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度 e% y/ J+ ^- Q5 zFirefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。 q$ W* s3 ~: z+ d( Y `, n3 P$ [6 W结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！6 L% z9 p$ [2 u6 r O m1 r- j$ O5 Z \ H vimg对象alt和title的解析$ U N z/ a4 Q) B D9 [+ Halt：当照片不存在或者load错误时的提示；# w( O1 N1 R% O5 @title：照片的tip说明。! A6 o: E: Y z: o# F1 c ~在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用) `1 v% k) V2 H( W l d( Q W% {% V( ^. x% Z3 b结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用4 p6 t( x }% h% ^ C, q) o- U \* Q2 d5 J7 F/ E* N c ?. U6 g其他的细节差别- O. ~* \9 \+ K* a当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。7 u* ]8 o4 K Q4 R7 p$ b Q/ Q其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。8 A, V8 k0 A. W/ t; ^. |) s6 e4 x4 p3 { i; z/ k8 t/ \+ p* N非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。2 j. Y/ D! A! ] R% g6 u; t1 z z7 P9 o* b. `2 u后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。) {5 U# N0 \6 O N# [* {! l( x+ W2 y1 `0 l2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案: ?6 S8 X/ `: d i Q7 o# Fdiv id=parent4 z4 O3 Y0 W6 ~; U) J: f1 Tdiv id=content /div e( J* d# l {2 T0 S/div* ? Y) y. J% ~. b9 i z6 |; I9 O, [# X7 @4 [2 i( T. S当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案6 X% A9 w; S! m4 [0 P6 u+ b P, j% C2 M* l1 v/ w% idiv id=parent3 r1 `( F. W# ndiv id=content/div, H* k% }7 o/ R: | ^7 ldiv style=font: 0px/0px sans-serif;clear: both;display: block /div* W. P/ I# e) N }/ t$ X/div S1 D ? r2 f8 ]# Y. [4 ~0 A$ v! M# q7 m; K0 b# G在层的最下方产生一个高度为1的空格，可解除这个问题: _