|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14219
- 金币
- 2400
- 威望
- 1647
- 贡献
- 1348
|
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。
0 T9 ^ A* V: V0 }5 w& n1 L, J& g$ l% A7 K
常见的兼容问题：+ q/ l6 V1 D4 i, w. x4 ?
5 T4 i1 }( p, J' |9 a/ L1 C 1.DOCTYPE 影响 CSS 处理$ A! J0 ~6 H4 N$ n
7 G# Y+ J: n; f5 [
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
, i! e: @( p5 `# l! v3 b& U# e# b- S1 A
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 Y" W4 p( p5 g% x$ i% `
% [" D/ t# |7 @# Q4 G1 a, N& D 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
9 t, z% g) }+ `: N, \9 `- K B& c/ a, ^( q+ r$ Q F9 m+ K
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式, L2 c6 T2 G. y6 M0 W
9 Q/ x. ~( ? i1 d' S' F 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行6 \" I2 ^' \' O& V
4 I. `8 _2 V, K 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
5 S' Y( c3 T5 e- t8 k9 v( |/ n- R" { X% F- C
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。& `' U4 D5 Y9 K8 @2 P
# M' ~2 V& @$ ?. b# Q: v 9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}/ X- a7 V2 v( ^; w
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}, f x! R+ y. }9 ]
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;' N; T y8 \+ x6 b, T# b
" Y4 C5 T, Y0 u% n5 y
10.IE5 和IE6的BOX解释不一致% F J! E% X4 ^& }4 c0 I
IE5下 div{width:300px;margin:0 10px 0 10px;}
* j4 A' w( H' m3 c! A div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}: z5 Q& `8 {% v7 i% \1 K
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持
6 V( w: Y8 n+ l8 d) y9 W/ k) K/ C
' e- {' d* j- J" }6 `0 ^4 ] 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题. Q! g( d5 e( `! l0 N3 c
6 T6 g8 o4 B3 [1 J
注意事项：
9 O/ R% @6 l. m- e( v0 P+ I9 _9 G T6 m T4 i4 ]3 e! H/ g5 A
1、float的div一定要闭合。. |1 _5 g( l% e( @+ L
, R$ T- ?6 t' O1 \
例如：(其中floatA、floatB的属性已经设置为float:left;) * z( I0 g! l+ C5 g
<#div id="floatA" ></#div>
, _+ d9 I o( j! I<#div id="floatB" ></#div>7 x6 }; I' R- g: @
<#div id="NOTfloatC" ></#div>8 m3 W5 |# I+ Q
这里的NOTfloatC并不希望继续平移，而是希望往下排。- r/ w& y& U M
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。9 B5 ]- C, Z1 w0 W, x
在 <#div class="floatB"></#div>
6 z! f( e/ a+ ]9 z( i" t; v<#div class="NOTfloatC"></#div>
# j' s4 H# Z# R4 g4 ~ 之间加上 <#div class="clear"></#div>8 F. j0 s$ _6 Y
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。& D( |9 o& h( m
并且将clear这种样式定义为为如下即可： .clear{
3 z! x& a& l$ u7 V/ j; o6 }clear:both;}- K: t. h7 F. A: Z
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
8 R8 {: t# y( L4 y8 t 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
8 a% ^0 ~! N: N& f2 D; w 例如某一个wrapper如下定义： .colwrapper{
$ K' Y$ R; D- l5 Xoverflow:hidden;& ]3 R3 p' F8 I" G p) z5 Q
zoom:1;! q; i, }$ j: i: G0 S: Z
margin:5px auto;}
8 V; L- D- ~% }3 c5 h
' c G1 g) t+ ?# L/ b 2、margin加倍的问题。% p1 h" {. L }0 @( \4 p8 m
1 B( I: y; I3 Z8 x) E2 t6 V 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
9 T: v( K- z- g# M! L 解决方案是在这个div里面加上display:inline;
! [8 Z! {" A* n; ?5 E1 F例如：
7 H) y+ W; }: X8 u, q: @<#div id="imfloat"></#div>
5 J1 E8 \5 O* g( V$ y3 W4 x1 n8 {
' t4 r4 \/ k2 ^2 t f9 m7 b. a
, h$ f7 r. C* `4 W E# X5 f. [( p 相应的css为
* x6 R" o9 d" Q' b& h#IamFloat{, H9 I" e- y7 C8 R+ w
float:left;$ J3 K' L+ Z6 U C8 O
margin:5px;/*IE下理解为10px*/
. O, k4 v( L& G5 Ydisplay:inline;/*IE下再理解为5px*/}% P: K9 \8 x6 g2 z
, c B* s, P. T 3、关于容器的包涵关系
6 S% f0 k2 P) i- E8 d) n5 t1 E/ R% z; Y' v
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。- `! |7 a$ i: v; k1 y
}2 r* F3 ~% F- y 4、关于高度的问题; ?' G) d6 o3 X5 c
( N1 M- S. A1 @% z$ Y6 Z 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）4 |3 Q0 h. ~5 ~" y5 z" E
# U7 C) _' Y' P7 t1 U
5、最狠的手段 - !important;
# }$ |$ D: N, B
. m9 N. D$ E8 U* Y4 D 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{1 J, w* K; I9 t/ q* ^2 L0 E
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
3 A2 H- v3 c9 _! [background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
" E$ {8 g5 \, H9 R- I2 n/ {$ Q 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 |
|
发表于 2008-1-25 02:44
| 