|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。9 s- G7 \ S: J1 a( v
9 Y/ w$ v6 }. \" n, l6 |; f 常见的兼容问题：1 ?! J! P+ n! |9 X
) T D" b* i0 z1 U8 J
1.DOCTYPE 影响 CSS 处理
! A8 j/ D n! n& [- N3 i4 L5 `" v3 C
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3 }. U# \0 |' r) D! [/ v$ C- J
9 z* O* n( e. X. u! G" W 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中# n$ u" J) J5 M. Q4 U
3 T# M8 E; S7 F1 p
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width- b9 q! t3 [" \- H
9 E' N- R5 H3 x: s2 S
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6 l) G- M% B( f. b( z, N" [- B; Z# r. J; h3 c: d
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7 N5 {, z& d0 k5 q2 C$ T8 ~1 E/ a$ C: R: f: A
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以0 a* I- r, w6 [8 I8 O
8 L; ^" m R/ B# @) x) R$ O4 p
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
' m# o" {6 N; D1 l+ }* Q2 {
) O8 i; t( ]0 b: f" Y) `$ J7 I 9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}
* E" |; B+ E5 f' \6 v 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}
$ o7 o2 N, S1 v 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;! s: N0 W; W) E, n: r% Z2 V; x
1 e# R$ j+ q" _7 J# U' b4 | U
10.IE5 和IE6的BOX解释不一致
$ |; u% l) J& V$ m IE5下 div{width:300px;margin:0 10px 0 10px;}6 u7 [# F' S/ s3 c) V
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}% o, `6 \1 |+ j, O' i
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持
- Q0 f! W; j5 |
! K* A; h) z5 G( w* z' g) l 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题2 k1 J9 D0 J0 X) e7 P0 y% {: \
" f* w* A* S) u8 D+ V: l' @3 Z 注意事项：# T. r$ ?. A* z) z- k( N% g
5 P' R7 r! _$ s6 l
1、float的div一定要闭合。( q q0 a- w) i8 y
5 i _ |- U E1 o( g. t8 @ 例如：(其中floatA、floatB的属性已经设置为float:left;)
: K& F0 R: \9 ^! l% x/ G<#div id="floatA" ></#div>
9 f" C! \) N- A. ]: V: u<#div id="floatB" ></#div>3 s5 E$ y# S6 Q+ `4 z7 E
<#div id="NOTfloatC" ></#div>! X& D$ j. r! A$ {1 e, o
这里的NOTfloatC并不希望继续平移，而是希望往下排。
) K# r1 k( c; K' j' |9 R. k! @ 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。; }. u2 G J9 a
在 <#div class="floatB"></#div>
M& b: V) g K- [" b7 b<#div class="NOTfloatC"></#div>
2 \3 j$ {# K+ B) r 之间加上 <#div class="clear"></#div>7 O% V/ `* [- R& u9 I
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
) v+ \! v/ h2 \* I/ t 并且将clear这种样式定义为为如下即可： .clear{
) y8 C5 a+ `! s& Oclear:both;}
; v5 X5 U3 \# Q. x$ G y 此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
0 s& ]0 }3 @& E 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。9 N) h. m& G+ D) |
例如某一个wrapper如下定义： .colwrapper{
6 W3 s6 w8 N, J/ ` }overflow:hidden;
! N- @+ e5 A5 t$ [6 Kzoom:1;( d. b# Q! `0 l' P
margin:5px auto;}3 G2 l9 P% q7 M' h5 e
% G+ h; S8 c6 M2 {- I3 } 2、margin加倍的问题。
8 d/ \7 L* s. V6 P" c* d* O+ x$ V2 ?5 j+ q6 @" j; n5 f" |* w6 u0 s; g
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
8 Z+ E0 @# E' B% b! ~ 解决方案是在这个div里面加上display:inline;
& U! i) n% R) x+ v# U0 c @例如：" Z* Y2 v7 x/ n9 C' }
<#div id="imfloat"></#div>
4 P( e4 h9 ]+ p/ l$ |0 |
! _ G! g: z w0 x+ b& T
% {; r' y1 H+ S; b+ D 相应的css为' `. N' x! M' ]/ J; R4 v1 Y
#IamFloat{* c7 s* y7 R7 \" Q* ~& B, s9 }
float:left;( E7 T9 i$ B$ ^! O0 E- c5 G
margin:5px;/*IE下理解为10px*/& ^& C: o$ I$ y6 A! J
display:inline;/*IE下再理解为5px*/}
& T0 r, U. U1 b' M# o" [( c5 Y$ R- W! H$ o( x. c) c
3、关于容器的包涵关系
8 d; b; P! k k4 j+ [" H" w0 I. g+ r
0 M( o( C3 ^9 {$ S: [' e) k; R1 ? 很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
: b9 @2 d( N1 G* |: s- r: H' f, h" ]- d+ _2 n8 |
4、关于高度的问题
' E& F9 u( T) g& m5 G( Y6 j' w' _
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
- H, U7 j7 k# Z K% R% Q( S7 s* y8 S0 Q! S0 M- T3 m1 z. x
5、最狠的手段 - !important;
0 v, F4 V4 W& Q; V! F) T# e( g5 y L1 a* w$ e# {" q
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{! G% b3 G# U) C- q& Q
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
, J4 S. i2 Q" o0 K0 Wbackground:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}3 Q# b: J x+ p
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 |
|
发表于 2008-1-25 02:44
| 