标题:
ie firefox 兼容CSS的问题
[打印本页]
作者:
admin
时间:
2008-1-25 02:44
标题:
ie firefox 兼容CSS的问题
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。
* v. O" Y; L4 N8 [
% e4 ~( w Q, t
常见的兼容问题：
& B- k9 M3 I, f% X( ^
. I8 j) a. i% G
1.DOCTYPE 影响 CSS 处理
) P9 c. {& P* ~6 c' z+ w# p
" \' ~* m) I) H( }" O3 Z7 g/ d
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
9 ~' K+ }0 H" A( O& ?
, B* b" z; C% O/ |+ [+ t* |2 p
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
9 X% J4 v( T, L u2 V+ v
& |5 a% m4 T5 v# |3 D
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
: g, D' H& r5 e! T- V! i, z7 J
% K2 y! k- O! D/ J: N
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
& t6 B2 I) V. V& K' U
& H; B' J* G% F/ Q% x! t
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
. u; w# J! e! b( O) a8 t
3 K5 O; k# W; {3 a! ]
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
& N0 j6 i9 T6 @6 q
8 m' K) l, i) d$ I! s
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
& |, Q0 H8 g% l1 u
" @0 C- N5 F; x- x5 P- }0 {& q
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}
' c w0 a' x; X5 c# A
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}
/ c3 U. p$ |. g3 q S
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
: x) P: M" T* h6 y
( F( Y/ g( r T L; b( d- I
10.IE5 和IE6的BOX解释不一致
1 L% `1 |( `( n O2 `) g
IE5下 div{width:300px;margin:0 10px 0 10px;}
- S- s" f! J+ L2 w) \
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
2 F* H) S X3 D r2 I
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持
5 u: ~- [, \ M# x. A
. n% j5 A/ x) ?8 } Q0 G3 m
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题
$ K4 X/ {+ R4 ]1 C
6 r7 k4 z& H2 o/ s5 k( ^1 y
注意事项：
- s: ~% u) v" c) x0 V* e" N7 A
3 [2 u$ o: ?6 P6 \5 Z
1、float的div一定要闭合。
8 \2 i! D l7 t, i5 r
7 M. q* V* n2 R
例如：(其中floatA、floatB的属性已经设置为float:left;)
" |& Q- O r- B0 c0 |9 l0 d1 f
<#div id="floatA" ></#div>
4 L# ]* q7 p0 V7 O
<#div id="floatB" ></#div>
* M: z$ o2 Z, O$ \/ l) f
<#div id="NOTfloatC" ></#div>
6 {1 e. r& @6 K; i
这里的NOTfloatC并不希望继续平移，而是希望往下排。
1 u4 S& y5 U6 p0 L, p& m
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
- L- w) D+ R; h. ^* G& ]5 N
在 <#div class="floatB"></#div>
( B- S+ N1 ?1 y `" k& F3 j
<#div class="NOTfloatC"></#div>
) p2 p& Q3 P. ~
之间加上 <#div class="clear"></#div>
( N [; d- S; I# m5 D
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
3 s2 G ?1 O# K! ~
并且将clear这种样式定义为为如下即可： .clear{
) G3 U q. j1 {4 \ p0 [( q: ~' ~6 x
clear:both;}
1 H7 ]2 k1 p* d/ O3 [. p
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
/ @8 J* B% e( E7 N
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
9 R, T5 o* T! d: ?( x
例如某一个wrapper如下定义： .colwrapper{
9 G( L" Q/ \) t* z4 y
overflow:hidden;
( ?: A2 K! a' v$ _! n8 _$ Q
zoom:1;
2 q( W1 D2 N: E% F
margin:5px auto;}
& u1 ~& {7 U! Y* W4 ~
, ` E8 G R# v7 t
2、margin加倍的问题。
) G9 c3 \+ J `- S- g- a
' `; J" ?( E1 x0 @/ u% w* S
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
7 c) H' }; d) ^# F+ Q$ N
解决方案是在这个div里面加上display:inline;
0 Z' d! S% W- c) c0 i
例如：
* V4 p4 e# p0 }; w3 M4 z+ b
<#div id="imfloat"></#div>
7 J6 b# k1 S; f5 ?4 V# ^; w6 M
; U* `2 D' Z' N4 @4 N! E) }
( b) I3 X B" n: n
相应的css为
: _1 ~. S& V' H$ @1 O
#IamFloat{
6 |3 @ J D! a7 i' p# E+ B8 M; c
float:left;
- c5 s+ J; d5 t
margin:5px;/*IE下理解为10px*/
] `0 C' \/ x9 I5 j8 z
display:inline;/*IE下再理解为5px*/}
2 q% |( n5 W$ J7 n+ N: f0 J" y
6 e" @" E/ ]! r1 Y* ?( r
3、关于容器的包涵关系
! M+ s% m; w; ?3 ]9 D, q
/ O/ Q9 n9 C5 l5 P8 _# g0 {
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
) ~8 p" w4 g1 ~8 e
* t' g2 f( j& K3 m
4、关于高度的问题
g* U/ T& r. s) e- {$ x
0 |8 f# B5 G, H3 w! ^9 j
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
2 e( U+ S$ ]5 r& h4 X; _/ R
" e, d- y, E; @" o
5、最狠的手段 - !important;
* w1 |5 u& J3 o; x, y, b4 i
: ]3 l3 e7 S9 x; H! |5 J; Q
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{
. [8 w0 B" l2 A9 }$ ]/ q' l6 a3 \0 h
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
9 P# H6 ?9 K" A6 o0 X2 H" y. D
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
/ n/ [9 f5 [. p) c3 x5 y$ H
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
