|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14159
- 金币
- 2370
- 威望
- 1647
- 贡献
- 1318
|
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。" u) r3 |+ W9 n5 N9 {
% }1 d( [! J' T% h3 Y
常见的兼容问题：
5 S7 y9 w* r/ x! ~3 T. F" T3 x6 a. J" _* q
1.DOCTYPE 影响 CSS 处理
K2 z. J6 |# b% m8 F
1 W1 h) l% q2 T0 H 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
8 m: f% b. e# s; N' c4 e* t% L1 |" ]1 M' E# \& A% }/ P) Y
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
0 R5 Y5 H& c y h* ]5 V) j: X2 S) d
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
) N+ a* F. e$ l7 N W& x
' |' ]) o; ]( P: ^; v2 F 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
4 S+ }/ A' V0 B1 f U% ] k) n5 Z: \$ v& T/ p
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2 H' E; |; J5 J
, O* k2 f. b: j. T) j# t7 B 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
' x, X, @+ e; O0 W! v; ?( ?" T9 r. w+ K4 ~
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
# l' i$ n6 @* v8 o; f5 {6 u6 i' g: k( C4 ~
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}/ w& e6 J( ]( W) @
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}
& a) I1 _9 J0 y, H 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;' U5 E+ Q6 I5 z. }3 g
3 g. P& b& v% s5 T. h 10.IE5 和IE6的BOX解释不一致( ~( f" @# u% a1 l! a
IE5下 div{width:300px;margin:0 10px 0 10px;}
9 g0 Z3 T) u. @0 x) Z div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
# u5 _% L) c3 S' E6 r$ M/ g- ^ 关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持$ E* p! k' A" b! F/ b4 e! W8 o( f
% ~9 x0 w. m5 I. B- b* g2 G- v: ^ 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题2 R3 }+ y# _, `4 t/ G1 S
5 a" B" }* x( ?+ z
注意事项：
$ n+ [- {. T( H9 T3 a9 x$ Y- j6 q# i& f
1、float的div一定要闭合。
9 O& F% s: k x, T
3 v7 s$ D$ t8 D) v% ?6 J 例如：(其中floatA、floatB的属性已经设置为float:left;) 6 L) c6 B& H; W4 R
<#div id="floatA" ></#div>+ ?! l) f+ l1 n4 r. @
<#div id="floatB" ></#div>7 X/ s+ |+ Y& y" @
<#div id="NOTfloatC" ></#div>
* g/ k% c1 {; s8 c5 J% t 这里的NOTfloatC并不希望继续平移，而是希望往下排。8 q/ O9 M& Z& _4 t
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。- R ^7 @7 o0 T
在 <#div class="floatB"></#div>
# B) T% G% P$ R<#div class="NOTfloatC"></#div>
\5 k8 N' @ d8 v7 v+ F" L* o 之间加上 <#div class="clear"></#div>
0 n8 H0 F; C+ z& h& I 这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
& J, H0 v5 s$ t& D 并且将clear这种样式定义为为如下即可： .clear{
# I$ z# ^: Q1 kclear:both;}5 I3 `% }/ l/ T! y% M2 J, W
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;2 a& ?- c' C( I/ b" v/ U0 @
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
! m( ]( j# b& c* c; g 例如某一个wrapper如下定义： .colwrapper{
4 E8 ]9 |7 b* Q: V/ {( {overflow:hidden;
" x; J* U2 E' K8 ~# Y0 J' Mzoom:1;
3 B6 y! `2 m, q1 a* Jmargin:5px auto;}
3 y# z% `0 E' g& I. o) o$ ?4 E4 f! ]1 y/ o: @
2、margin加倍的问题。% V- ^. ^) S# c4 k6 I3 w3 y
- X1 ~3 x! ?: e6 i
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。' t7 c/ ?( |2 T$ C# z/ N, t- N
解决方案是在这个div里面加上display:inline;
) L& Q9 v6 ~/ ]例如：" G9 K9 q+ s& c+ d, w2 x8 |" I
<#div id="imfloat"></#div>
6 [: @5 a: I+ J( |+ c
+ J9 t: p- p7 M; m9 _7 d# i# E8 y5 Y. k6 E( K, r
相应的css为. `8 I( W) R+ z* C# Y5 R
#IamFloat{1 N* {% X: v5 z
float:left;
I3 n; P/ _4 z: Imargin:5px;/*IE下理解为10px*/1 ~/ k" n: {* L* Y3 e
display:inline;/*IE下再理解为5px*/}
6 y$ V+ g% x# O' u5 Q- V' R( B8 y. R5 ~ i' V0 \
3、关于容器的包涵关系- j( J0 F; S; e2 [$ B
1 s: V% \! Z0 E$ F) O 很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。! x: w6 [; V4 c$ Q
2 }! x+ D# _$ ~: t- T
4、关于高度的问题3 C" _' E: @" i7 e
! u* x. Q0 |4 {9 j. o
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）( H; O* A- k! V+ d; P
$ \# h! K% q% Y5 O7 R 5、最狠的手段 - !important;; O) w! N; V2 B4 [/ \" v# u; e
2 `; S; V' q. N 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{ ]& X7 D" {- `
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/% H2 H6 n* X3 c" ^+ n
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
2 C2 ?) R. q2 f; @% L/ h7 O4 p 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 |
|
发表于 2008-1-25 02:44
| 