|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。
; V$ i: q0 h. m- m* ^9 R
/ l' p$ s. C; a) s! y% r8 M, r 常见的兼容问题：" o# x! R& Y( @, U3 z8 P$ Y
7 P8 u7 `, g2 u" }" @3 y 1.DOCTYPE 影响 CSS 处理( Z* s% B# Y" s. y9 X, D
" {/ C, F; u2 Y; I! g+ k 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行/ j( I( \8 Q! u0 F& \6 P* U1 b
. F! B$ o& O% m 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
: Q% t5 H$ `5 @! R1 _, m( K8 w$ m6 n
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width# O0 @7 T0 b2 P' F# q
! z' J' d' D' j6 l$ N" y 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式5 ^( S5 g% j7 U& A
! B" x& C* n2 o 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
; c$ P1 `3 U# M3 A" G. }, E) I K+ F$ ]
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
$ n& N3 Q; U9 P+ G8 c' _
! `$ W5 T7 E6 |: p: r 8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
6 W0 Q) @" i' [5 h) M7 |
4 S% ]2 A2 R. m' T2 G- q" d: J; ~ 9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}
, _" W4 T! k; c: |; I( M2 ? 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}' d* n4 R( D( O) e3 |; f% [; r
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;# r: A) R! U7 A
6 Y: S- C4 O9 ] r9 q6 T: {
10.IE5 和IE6的BOX解释不一致
* r8 J5 L9 T8 c9 n& E2 e5 B! T0 L IE5下 div{width:300px;margin:0 10px 0 10px;}/ X* |& G* z* I
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}3 R3 B) ]% q& r8 x4 _; h
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持
% l+ K) m0 C! l: K1 k: q' R0 U( n/ N# E" Y! T+ i
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题1 X4 i4 }( W* `3 j
+ }3 h# {- ]9 @ 注意事项：
" v1 g, t; n. T0 r' w7 K0 J1 {9 x' ^1 q" H$ M6 ]3 O: D
1、float的div一定要闭合。
* L$ w* r* s! o/ ^/ p, I1 o4 ~7 ^; m5 l
例如：(其中floatA、floatB的属性已经设置为float:left;)
# f5 X; H9 J- R; [<#div id="floatA" ></#div>1 l: h+ E8 y( l X7 d# u/ x
<#div id="floatB" ></#div>
0 W4 T8 R+ d* Y8 f* ?5 C5 E8 ]<#div id="NOTfloatC" ></#div>
7 H1 ?1 T. z' Y 这里的NOTfloatC并不希望继续平移，而是希望往下排。
& i' F' |# E i* w! H 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
2 v1 m9 Q/ P6 R/ W% x6 k8 c 在 <#div class="floatB"></#div>
2 X/ ~$ {/ s+ _' m7 P/ p$ H- P$ _<#div class="NOTfloatC"></#div>
* x9 Z0 r' a% r, R8 J- ]0 F- K 之间加上 <#div class="clear"></#div># |( g4 O: g4 e* `6 C& a
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
) l( v8 d. o' D1 w# T 并且将clear这种样式定义为为如下即可： .clear{
# B, j6 r% S" |9 I( _ j0 Eclear:both;}/ x8 E: i3 r0 O% g: m7 h; A
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
# F. A- [9 N8 A) Y7 x 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
6 |5 y: a2 p- A: n$ ~4 A/ J) A 例如某一个wrapper如下定义： .colwrapper{
% j# }$ {9 U$ woverflow:hidden;
5 N4 Q0 d7 o" K, Vzoom:1;3 R. \. W# L1 g
margin:5px auto;}0 q: i8 u. {$ L( r. y% w
, K) {0 ]4 c& _' @( b. B 2、margin加倍的问题。
' |; Y4 b2 t3 I$ { ?1 F7 Z+ k1 L3 b9 C7 u$ J
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。- m: @% M7 u1 F7 w* {/ @3 ]
解决方案是在这个div里面加上display:inline;( o6 e# M7 T3 C9 N
例如：$ {+ ]; Z* Y; r; k! r
<#div id="imfloat"></#div>
& L* G3 O6 o/ ?) r" A$ l
- F+ y- C& _( l: N; W: {5 t' d0 {1 {$ c# c; X2 d/ m# s
相应的css为4 ]( l4 ], p" l: E$ p/ g1 a; n Y3 G/ q
#IamFloat{
$ M: n' {! ^/ g2 M- [& G- T; C, Afloat:left;
1 }9 w, k: d2 U9 ]. vmargin:5px;/*IE下理解为10px*/
, c* g) [3 V0 r0 k$ c: ~+ Ldisplay:inline;/*IE下再理解为5px*/}( e" j3 R3 v: C* {. L) X
4 G4 n9 K3 I' p, T$ x1 G) l9 n3 t V 3、关于容器的包涵关系+ h0 ~1 b+ J, I
3 p1 ~( _7 }% [/ o 很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
- f: R; O& M& e7 o: m% j {
$ h- R4 F6 @7 y0 R8 W) G, Y& I 4、关于高度的问题9 V# B& c. x' _9 z+ p, p
3 K& d, Z2 l: ~7 L. A; S- F
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）: M# Z9 E+ B/ Q1 X
& K$ |. ~4 D' u! G$ v- [4 | 5、最狠的手段 - !important;
8 k: `# H: j0 n1 \! P( e0 {0 E. ?. g8 n7 X
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{; F0 [* A' g5 I1 r, ?- |; f6 }
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/3 t4 v5 [( h( g$ v
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
" o7 {( B* q( N; [# }, x 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 |
|
发表于 2008-1-25 02:44
| 