|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。; a. U- `* A3 r5 d& u- {* I' C
3 K: A7 M. J& I. f8 } 常见的兼容问题：
2 P4 C8 c/ c5 x2 Q3 [
+ S' A% y' Z/ Q. a0 ^9 C 1.DOCTYPE 影响 CSS 处理& `3 ~: B5 p( R4 Z. k5 V4 i/ m" n
! f, i) Q! g) y4 A$ S 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行6 T' C2 x V& r0 t4 R! Q, u" d
: x# m; y% P6 \ ?* w" } 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
+ @: o, A* Z3 {! n' f& C0 R6 I \5 I" j1 I& G, H, j% |5 U7 a* k
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
0 ^4 `6 I+ N8 g- v' x# R2 Z4 P2 N6 W: G1 o! t
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
/ b Z$ L0 X& m) v6 F; \, l0 o& j$ d) ~8 H$ c* m* A& t4 o
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行) B8 S/ E% ^! l$ K6 j2 q6 `
$ d( o5 }+ z; D1 C" h
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
# B6 }* \' v \9 D G- D7 D3 O$ J: G# e$ E- [6 q9 M6 A
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 m" \' S. i C5 L! b' a; y l
# @; J9 f3 _' j% U6 D- s7 u
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}! a3 r" `2 f9 h, e
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}4 Z5 K y- L( N4 e4 X S
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
2 I# n* c/ \* Q% R, a; j6 W. s/ s; H1 w2 B8 J, s
10.IE5 和IE6的BOX解释不一致4 ]0 h/ m$ v- {1 O5 D% @
IE5下 div{width:300px;margin:0 10px 0 10px;}' S( m% X2 G/ V" R
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
K. U' d; T4 ]1 y y) C 关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持
; U, ^: W* p, i& F5 n: ^# m! \, ]& W2 t& Q' k
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题
8 v! V6 e( b4 l/ {+ ~5 L& d+ |6 ^9 T9 ]
注意事项：
/ \7 m( o$ T K0 P8 L) V* j
+ \8 W$ H7 L6 u7 t' u 1、float的div一定要闭合。) u: @0 P. o' N8 D- b* [
" B# b, e* T7 J
例如：(其中floatA、floatB的属性已经设置为float:left;) # ]9 ? N7 h5 H8 Q. b
<#div id="floatA" ></#div>
2 w* J/ w# [ M# x* {) \<#div id="floatB" ></#div>
: B0 C M3 [) [<#div id="NOTfloatC" ></#div>3 E" M% G% f- r
这里的NOTfloatC并不希望继续平移，而是希望往下排。
0 _. P3 o$ t! p2 L* F 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。* a6 {. T/ q, g
在 <#div class="floatB"></#div>" C+ i7 C8 K7 z4 k' M( l
<#div class="NOTfloatC"></#div>
% y- s& v1 r6 l# ^; f" t5 ^9 E) U 之间加上 <#div class="clear"></#div>+ P8 d1 N2 E6 [8 T# L& q
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。( Q$ ?! d/ n& ?( O* W7 d$ y3 v
并且将clear这种样式定义为为如下即可： .clear{
L, P, R8 A0 i" q$ _. vclear:both;}
; a \5 E1 R; i- o; I 此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden; r" I9 g' j7 V# Z* }
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
2 n2 }/ b: g" U: V7 c 例如某一个wrapper如下定义： .colwrapper{
* g P9 G6 b- Q% Z8 yoverflow:hidden;9 e6 f: F5 C/ z' T. i
zoom:1;
" d! j( x: x$ `8 f1 K0 }! s+ P/ A( Bmargin:5px auto;}& c4 X6 u: P" E- Z; Z, f( V
1 E8 j1 W; O% y9 `
2、margin加倍的问题。) y# o/ \6 q9 t& |5 {
' b A; u7 b5 n) R5 g
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。: A# q7 k8 R2 `' j3 ~9 R, h
解决方案是在这个div里面加上display:inline;
7 j" C0 x0 x+ c9 k例如：
8 i# S E: {& N( U<#div id="imfloat"></#div>9 A: z5 H/ B% ~
$ W; ^% L% [& F" _( k$ k4 G
' a3 t7 h$ N* _; Z0 N; ~: b6 g 相应的css为3 [) {6 f2 K8 x" { F: H& M" q
#IamFloat{
) e2 G4 w1 e, a- `float:left;
2 b; g4 W* n! s/ e+ `7 }' @margin:5px;/*IE下理解为10px*/- z. _+ i% O1 M- e; H) }
display:inline;/*IE下再理解为5px*/}
/ r e3 Z: E5 V% J- t5 x: f
" O1 N6 x: c9 F 3、关于容器的包涵关系
3 I$ \9 ~! n* A$ @- V' k+ W3 m+ ^* C! e7 q4 S9 X5 N6 o$ H1 K. w& q
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
8 ~' w" `5 d3 w& \- J W, @! z6 V) M O5 E
4、关于高度的问题( {% [8 t# n4 F+ ?7 z; ?
$ [/ D- ?9 `2 b7 Y 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）0 o) W5 q* d# @: ]! b, F
4 c" H2 q k+ p+ V
5、最狠的手段 - !important;
) ?! S% z+ a8 x( w; b- L% V
6 Z! {9 b4 X7 a2 I( ^8 ?. b% t 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{
8 ]6 v: r* l" h6 Bbackground:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
' B7 e# ~/ V/ a& |7 @background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
5 I0 G( P/ P' ^ 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 |
|
发表于 2008-1-25 02:44
| 