|
  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
CSS对浏览器的兼容性具有很高的要求,通常情况下IE和Firefox(简称FF)存在很大的解析差异,这里介绍一下兼容要点。
1 X" `6 D" s1 l: A+ `6 ~9 [) o! j! T
常见的兼容问题:' E% _+ n5 }2 D3 G0 e, j2 H4 C
7 T/ X# K. H3 R- ?: V% `8 F& b. [
1.DOCTYPE 影响 CSS 处理! U1 G8 |, Q: O0 F$ p: V9 M2 @& X
. [' z; _- L1 w- t
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行+ N0 g& r. r. V% w
' [3 @4 u7 T, ~
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中8 D, E$ ], c: g& ]! ]2 M
* K) `4 O% k; E! ~8 I 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
. M' ^& p2 l4 v
9 L, u, y% R0 @, o% s1 | 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式. k5 ]0 J! Q3 `% }6 n' X
# |, ^6 D3 E* H
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
h' q, |8 E$ e; c/ e) v1 d. Q! ]% I7 e3 J- c( e: w
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以& `, ^; }, Q3 v$ i" V; N1 b
- W/ x" u# d/ Q; Z 8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
6 P1 x/ ?* `8 s% x M3 c% T3 @9 Y2 f! f4 J
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;}
' T+ v, l' V, P, M 注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px}+ b; U) m; h! C5 E7 ^! {' [
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;8 d3 t1 a6 W2 X" I0 V+ j- C
( ^) f2 }' O( V0 w9 J
10.IE5 和IE6的BOX解释不一致0 z u1 P: g/ ?; [
IE5下 div{width:300px;margin:0 10px 0 10px;}
5 y" a* Y. A1 g div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
/ {- d) p U# z" {( G) w/ B. T 关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持
+ ?& e1 x( ~+ u+ Q$ P9 f( |4 \- ~# E6 C
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题" o& Q( e3 N H+ {3 V
# \! I( j5 ~! X/ B 注意事项:
& c! \! F, O* V e7 y' }/ c; |3 C
# E- F' @+ T% o2 C2 q; |" d* p 1、float的div一定要闭合。+ U# [0 W8 p `; Z4 U4 g
8 m7 i8 g0 R- D; C& A
例如:(其中floatA、floatB的属性已经设置为float:left;)
5 H% t# Z B5 h7 {' _0 S<#div id="floatA" ></#div>
9 @" W" k% D$ \<#div id="floatB" ></#div>
9 Y' M3 P4 J* g<#div id="NOTfloatC" ></#div>
& ~) z: q9 Y5 x" `1 R+ a9 S 这里的NOTfloatC并不希望继续平移,而是希望往下排。* b* N1 W' x b2 i
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。) C+ N4 b) E4 B* ~
在 <#div class="floatB"></#div>; `( G3 N' \2 j% w2 x; d/ D
<#div class="NOTfloatC"></#div>
0 r- s- ^1 ]9 P( T 之间加上 <#div class="clear"></#div>7 j% ^; H& D$ S
这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
* u; {5 ] W" J% o 并且将clear这种样式定义为为如下即可: .clear{
% h- @* K( G( e: Bclear:both;}
7 `3 V C/ b$ G2 z+ g; Y 此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
* R" Y4 c% j5 [) ` 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。; K6 v( w/ ]: M: J: w, K! z
例如某一个wrapper如下定义: .colwrapper{
, [7 ]: [2 o) f6 Y5 Woverflow:hidden;9 q8 u/ ~7 n% z8 ~0 v' o& u* G
zoom:1;
+ G) `# a; `& d! S; Imargin:5px auto;}+ N4 q+ x( g" _2 k# |
, S1 M) p7 x$ k6 P* K 2、margin加倍的问题。
8 W* R' `; |. g- J
" t1 i; B0 Z* E 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
% [) o$ `+ f( l3 W$ W3 _, S" F 解决方案是在这个div里面加上display:inline;+ c, D- w$ r' Z7 B* f$ i
例如:( E3 n8 q5 f- m9 ^. p0 ~
<#div id="imfloat"></#div>
1 n' L1 p' j0 d K0 P0 n5 m5 B' \9 g# `, N, b' }
6 d" E8 ^8 f/ m& P4 X a& q 相应的css为
H$ a. @9 u" S6 C- ~5 b& C+ x/ _#IamFloat{
4 E6 k6 V, T/ a' |) Nfloat:left;
; b7 [. L# w O- f/ amargin:5px;/*IE下理解为10px*/
. Z% o4 X5 h- q" z1 X0 z& x; U: g2 Rdisplay:inline;/*IE下再理解为5px*/}
1 X! i. L9 r3 k$ c) y9 X+ W o9 K$ o0 G7 G
3、关于容器的包涵关系
$ C" e$ z9 I1 O5 _3 [2 \
: @* P( D: @7 W3 F' D0 M 很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
9 |9 @) I; U' Y6 `2 l1 u* Q
5 H% E2 H1 w" t" Q0 E: Q 4、关于高度的问题 O* ?/ p3 S7 y! @/ |0 ^0 Q* ~
) M" h2 L9 ?& Z; e' r7 S8 q6 ?% v$ Q 如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)) r# C% Y a0 x/ Z- |5 `
$ E9 H8 l" O( i' w/ W2 o- U 5、最狠的手段 - !important;8 a f2 c3 x+ E: O
! d- a* h7 e9 L/ V ^7 o
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{
t0 y* S5 x) y( m, H0 v0 X! dbackground:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/8 T& Y' O6 i0 B' m! C+ P
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
. D( y+ Z p8 l 值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过 |
|