返回列表 发帖

ie firefox 兼容CSS的问题

CSS对浏览器的兼容性具有很高的要求,通常情况下IE和Firefox(简称FF)存在很大的解析差异,这里介绍一下兼容要点。6 R$ P% |" m. E% ~1 h

7 O8 g, e" s8 g! r  常见的兼容问题:
) r/ P# z3 X0 C( y% f) `3 b" V
' j, ^4 K$ ^( `8 T( x0 M! F2 a  1.DOCTYPE 影响 CSS 处理
/ ]9 y" u2 ]$ w) t, A( T+ ]8 I# W
/ ?+ s2 k, L0 d0 \  2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
" x: w/ _) Z, \$ c& ^
/ {; i  z$ U+ B( m# @: z8 b* E  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中+ k& d, `6 m/ E. S
* m: H# o  M( L+ T
  4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
  }7 U& d; _+ q- a  \+ P) c  X7 `) k0 M' Z
  5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
; l/ ?) `1 r4 W+ O! o
, G" n% g* m! |' e. I1 r+ x; A- _/ t  6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
- n$ t* u' ^. x7 _) U5 q2 g
% r0 q3 o) }3 T5 k. L  7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
' C+ c/ k2 X$ w  j. c
( d4 ^7 z5 P% l5 h  8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
" ~& l# @( ^* u8 p2 b4 T
4 `" z# \* c- @) i' i% S. u2 j  9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;}( O# x) t% p7 D' V  X0 F& T/ v/ l
  注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px}' a; U1 A; u; U; K4 y
  重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;7 Z4 Y4 z' b; e2 ~6 |# Q
/ a) N% L9 G  B1 m* J- B5 y
  10.IE5 和IE6的BOX解释不一致
- p4 x# l8 E% A. A" o0 C  IE5下 div{width:300px;margin:0 10px 0 10px;}
: V$ Y8 J! K2 Q8 [" n  div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
8 @; S- J# y" y4 U) P7 x  关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持
) [( a5 f8 |! S6 R' E5 L8 v
5 r( G, \: _' P! b6 X0 M  11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题
% V1 ^, y* @- d( z/ @' R' a. l/ L* V8 A+ l9 ?0 T
  注意事项:
3 }/ o( K2 [6 N( o1 W: T1 i& o& }
* r/ r+ S/ L* f8 O& M) {) ~  1、float的div一定要闭合。
& _' d; N$ N6 b+ d% g! ?" K- J- ^7 Y1 ?. Q) q. d
  例如:(其中floatA、floatB的属性已经设置为float:left;) ! `- ~# q( N* k6 d9 h4 B
<#div id="floatA" ></#div>
' O) v% ?5 n/ [' I8 w' w3 a<#div id="floatB" ></#div>$ ]$ _- W) b4 L3 V
<#div id="NOTfloatC" ></#div>
+ E! q! W2 ]7 I/ `3 m; W6 S+ ?0 r  这里的NOTfloatC并不希望继续平移,而是希望往下排。
; p8 X) R- W0 p3 u  这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
9 ~. M" L4 G9 ^  u9 |  在 <#div class="floatB"></#div>- s& U& _1 |# Y) V7 S  C0 k( S) h0 X
<#div class="NOTfloatC"></#div>7 Y9 j( r8 z+ t3 A! ~: J  }! A
  之间加上 <#div class="clear"></#div>. X+ u* O0 n) }2 `
  这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。2 N7 p( v$ C9 M; X
  并且将clear这种样式定义为为如下即可: .clear{2 b* v  \# n4 w% k9 W6 V
clear:both;}& O+ b1 R/ u3 m7 k- ^9 |. g
  此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
: j) [/ S. x7 C1 ~  x  当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
4 d/ S  v2 L9 G" N! ]- W. }, A  例如某一个wrapper如下定义: .colwrapper{
' e( a2 I; d. d/ v# ^( z% \overflow:hidden;
5 ?# D1 ]2 H, q  G! e" Lzoom:1;
1 u4 ~6 d7 R* ^* a# J$ N# vmargin:5px auto;}
/ _6 R# {$ c2 C5 b! w( R, ?. d2 I& Z) p. ^
  2、margin加倍的问题。
7 Y% }( R* |7 m- W8 \/ d1 Y
+ y; e0 i- i9 S; O; Q9 q  设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
4 p& D( e- j% p# W: k9 X  解决方案是在这个div里面加上display:inline;  ^- G- G4 ~6 ~2 O# O
例如:
/ @; s" S3 b; X<#div id="imfloat"></#div>* J- Q" B" [0 T4 ~4 g

: f1 ?$ J9 Z$ v7 l
7 }# i  u) ?1 m7 |6 K+ n6 }  相应的css为
0 D* J+ K* b7 ^7 b, U  ~+ S0 Z#IamFloat{
- `3 e$ a) B1 W; g6 M" t5 B2 |; t9 `float:left;/ y, L/ k; y% N: J3 r
margin:5px;/*IE下理解为10px*/
/ k' H  E* B. e3 Y2 Z" j. Bdisplay:inline;/*IE下再理解为5px*/}
9 x2 ~/ ?1 H# N' v
/ i" S9 ^1 J$ G  3、关于容器的包涵关系
& b6 M# f& {% `  z4 h& T' w' w
/ |) b1 E- v+ d  很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
7 [/ C/ @: g: s% D& f" P* P8 a2 T! W! F; B1 v3 Y  t' k  O
  4、关于高度的问题
0 l# \$ R1 R: c8 J5 k1 _9 c, \% Y6 J" P! E# [/ ?9 `
  如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)
, ^) b% Q; U: R# l4 u0 N
( {/ Z0 \$ a- y) u8 K6 L" P  5、最狠的手段 - !important;
; {8 a+ J4 e! m& O* Y6 \6 u; k2 A

- J" p) K' w; [; o. ~) Q1 M  如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{$ G  e" q3 _/ p+ w! v" R
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/8 K/ w  S% B5 @* _  J
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
9 ~& u( R2 M6 o% b, s  值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过

返回列表
【捌玖网络】已经运行: