ie firefox 兼容CSS的问题 firefox, 兼容, CSS

admin

CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。# A+ I2 u2 _: ~4 X. p) T
9 m& U  q  g$ Y# t4 t1 I2 m
　　常见的兼容问题：+ s6 ]! Z% l5 h( _+ R/ V; l: `

; f" n+ C# ^" w2 M; l7 D　　1.DOCTYPE 影响 CSS 处理* i2 o# C5 p) X; Z$ y
" ?! g7 _+ B9 `$ G: H# `( B  O
　　2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
% Q- I1 b3 k* U! H- V4 ]2 |( D3 ^; R) [
　　3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
; t1 p$ P; ?" \' f  }$ C- |9 Y2 q, o+ n% l& x
　　4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
' U* ?0 C9 e  M& J& [. Z2 x7 Y( a, T2 `. h
　　5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式: e) T: H, P. p8 Y

$ [4 W  U6 C& {. O7 M! N8 p4 ?1 @　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
! d. H/ ?3 J/ R) k/ [' g; j: E6 ~" j0 s* z$ X$ F* X
　　7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以, e0 Q8 E7 s9 i/ D4 f* n
9 H& _! O$ ?; V, D( W5 W
　　8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。2 S* H) Z0 Q/ f9 o- ?
% |9 }1 E2 W* x% N
　　9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}. _' A4 V& e% m" R7 P0 y$ i0 @
　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}# G) V9 T0 V9 @
　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;9 G4 d) V9 N/ I+ W
- K$ A; A! t2 Y2 L( F; i/ S
　　10.IE5 和IE6的BOX解释不一致4 ?8 u' [% c) {) A  O! m* Y
　　IE5下 div{width:300px;margin:0 10px 0 10px;}- T3 x0 N& Y+ D( u
　　div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
1 b; ]6 S$ K: R: F( ]　　关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持4 m$ `% h" F' q  q4 Y, v

  u# h$ Z0 z0 U0 L! N5 F　　11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题9 D: b' a* p& b
; x" F5 X  v: b; Y
　　注意事项：6 a9 t+ z" z# k
# `8 L: `% |/ @- E3 q7 ^, g! `
　　1、float的div一定要闭合。* c8 g, V' c( c2 g2 k3 r
& I  G' w% G$ @  x( c
　　例如：(其中floatA、floatB的属性已经设置为float:left;)
- o' U/ f6 u9 Q<#div id="floatA" ></#div>
: B4 J6 R/ e5 P: Q) Q<#div id="floatB" ></#div>) Q, N- I! n3 ?% R& I2 x; t
<#div id="NOTfloatC" ></#div>
3 X) v, f% S. s4 [2 @3 q　　这里的NOTfloatC并不希望继续平移，而是希望往下排。
9 F/ ^6 |3 q; U* b$ a. E　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。0 [. p4 [$ z1 U4 ]( d
　　在 <#div class="floatB"></#div>
$ N3 V- `! b, ^! v: g/ Q<#div class="NOTfloatC"></#div>6 ~. P! U' c1 A' b( i, V* e
　　之间加上 <#div class="clear"></#div>5 j  W3 w) c1 L& b4 U8 J% Q
　　这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。, `; Z5 w) d1 `2 E1 d, c
　　并且将clear这种样式定义为为如下即可： .clear{3 U$ X$ `( t$ Q
clear:both;}
. T  R$ X; u; i# |5 |+ H　　此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
8 Z- u4 _+ M9 h/ L+ V* k  c# {( \4 H　　当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。( N- }4 o/ Y6 P% X
　　例如某一个wrapper如下定义： .colwrapper{' d, W9 j( n  Q- Z+ u/ K" s; b; D
overflow:hidden;
6 {( f. c8 s' I* m! x: @zoom:1;' t% V( I3 k. ?5 W: f4 o9 c
margin:5px auto;}! Q% h# d) E& r7 E
0 K. B$ H  I1 u
　　2、margin加倍的问题。
8 q7 ]5 M+ m1 F% r( o+ [
' _1 v$ p0 U( S+ y  @3 q　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
& Y4 S+ s: ?9 p4 Q# E* q0 i" d　　解决方案是在这个div里面加上display:inline;& U: X4 |: c8 h3 J
例如：
( f1 L, E5 W" q# \$ A0 `, S- p<#div id="imfloat"></#div>
' U. }1 w1 V' y0 T* l: y4 i/ s/ E! {% Y2 D5 |
; C) q) z/ X0 B: k: m% J1 l9 l. u
　　相应的css为( L7 V5 [6 }& t# N  v. v- T
#IamFloat{# Z+ V+ B9 S4 J6 m  Q
float:left;
' L' V5 [/ Y- y; s# j5 N# @margin:5px;/*IE下理解为10px*/! Y0 u' x* f& g% h
display:inline;/*IE下再理解为5px*/}
) I- }: F  Q7 [/ @3 O( _1 t7 W- I4 B9 B4 {7 f& x: ^) c; N$ |7 T
　　3、关于容器的包涵关系
6 ?; J- w3 a- B0 U4 u" H% S+ T' d0 w. F5 @  X" Z3 L/ p/ K+ C' J
　　很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。4 v$ \9 W3 C: [8 z5 [/ X4 e5 Y

& E" L$ N: [6 q7 I* Q4 ]　　4、关于高度的问题2 O% m9 u$ [8 X  \. i- s
( Q+ ~" E2 [$ `: L% i
　　如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）; S1 X8 z$ n' G% P+ @

+ J# u2 J% N/ i9 D　　5、最狠的手段 - !important;- T. Y  Z8 O, u' R% f* K* {0 Z
( a; M7 a0 H3 g
　　如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{
! y) }8 {$ e; ], _' Qbackground:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/1 P1 @9 Y- _7 r/ j( S4 ?" A
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}9 R0 Z1 ~, I) [# a8 W
　　值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过