|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。
$ n+ }' i; | U' X9 Y$ E2 W o: a7 {% x
常见的兼容问题：4 O6 O! _6 l) c+ o% U/ F
0 B3 c$ r, _' B7 D! G9 t$ A 1.DOCTYPE 影响 CSS 处理5 D. r7 D1 c Y6 e5 r& N
" F+ e" F; D4 y% G/ h 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行7 m2 ]- y( E* c: y) e3 a
! ]' D1 I2 q/ [1 n( Q8 ]/ C* | 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中8 o; k! s/ N5 W, q* l3 I
! w( E ]" V4 K, U
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width" W" X# F6 F: y8 @0 N" {
7 y; w; q0 g% g! H8 C9 @# i3 t
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
; Q0 H+ H% Q4 Y. b, p2 Q3 s* f
0 t3 Y, V/ w% J% k5 n8 e7 N* K) s0 y* O: ^ 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行& U* q- B) s& n& R2 V; s. j
_0 a P9 O. `3 e 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以6 D7 n9 K: y1 M6 ^
5 L6 w) A$ z$ u+ s( i
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。6 X- s& d$ {& f, O: A; e- T
3 u: U/ X) X$ \
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}
/ U1 [' z N; F& F4 [' j 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}7 u% {$ h* c6 h
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
8 i8 h+ {& B" T, J) u0 @: t9 P
" \9 b& t2 l6 w; J 10.IE5 和IE6的BOX解释不一致
8 M0 y |! v! L IE5下 div{width:300px;margin:0 10px 0 10px;}
& C' K$ B' @$ g div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} t8 C2 E1 k: c: d6 b
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持
E& c) |7 f( Y: J k6 i
1 T# c% j! m) \9 U1 P, k, q& M 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题
8 Q8 ?& \) P6 `. y; D+ b& ^; J
/ u" K) }% O3 A' e 注意事项：
$ G9 t& _! P8 y6 {$ @# ]; v" t3 ^3 S" T, l) A d
1、float的div一定要闭合。 ?) b9 M2 N1 a: f, {7 Q4 H6 v% T0 z
; P. A& M1 U7 S# g" y2 |
例如：(其中floatA、floatB的属性已经设置为float:left;)
, n; X" X5 v- E/ s' a+ B8 j& u<#div id="floatA" ></#div>. |! G0 F: }& _$ H4 c8 C
<#div id="floatB" ></#div>( e# N& }9 l$ F7 P
<#div id="NOTfloatC" ></#div>
# S- L8 a: U2 w; c' K" f 这里的NOTfloatC并不希望继续平移，而是希望往下排。
0 g/ W" v+ J6 p1 }5 V 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
" l% \. c$ V, j) [ 在 <#div class="floatB"></#div>
- w: ^$ w) w( M; y" g<#div class="NOTfloatC"></#div>- a7 o5 V* |8 {
之间加上 <#div class="clear"></#div>3 U( {* Y4 a0 D% O( A( s2 l
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。7 S1 ~1 D; U6 F( [* L% k
并且将clear这种样式定义为为如下即可： .clear{$ G0 Y, H2 Q; ^& g' p6 g
clear:both;}( {' r( g0 O& C) C
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
" V; Y0 }* R: O* f5 C; M9 _ 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
) S% _ M* M% {0 G7 O 例如某一个wrapper如下定义： .colwrapper{
$ x9 |6 @ L* Y' ]. moverflow:hidden;
5 C/ [2 b/ F1 N0 B$ Vzoom:1;
7 E- E6 m# C$ `" Pmargin:5px auto;}
" i& ^- A# f) u' g e/ @( |5 V7 G4 j! @& v' v) S% e9 `
2、margin加倍的问题。
& ~/ a' \0 ]# b1 ^- M% P# v8 r. [- _1 Z+ W' N& T
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
6 S/ {2 {9 K$ o+ j2 @0 ~ 解决方案是在这个div里面加上display:inline;
8 }* S8 n& a/ N. @0 i; l例如：3 ]1 n8 L, S+ p, p
<#div id="imfloat"></#div>
# f& e8 t- H0 A, e! v% s0 {7 _4 h& j
$ m3 L- t, l+ d5 ~
相应的css为
/ G/ {" s! O# | A; w#IamFloat{/ A, J: p' e- C0 i/ N5 f
float:left;0 S6 S1 C7 O- ]
margin:5px;/*IE下理解为10px*/
) `! u) l) e5 m8 I" S, ^display:inline;/*IE下再理解为5px*/}$ [( w/ X0 `( V9 [! _4 ^$ y
~. `. V# H4 S- V: `- b2 _9 |
3、关于容器的包涵关系1 P6 _$ a( B4 ]# D' h9 q
! v# Q9 D9 ]( |" o6 F' r3 |$ p* g
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
( x) ^8 @# P2 Q) }, a5 c- d2 E# g" l2 i Y, z+ S! T' U5 U
4、关于高度的问题
7 U( E3 C/ x0 f. H# B
& N' M$ P; n0 W! T' F) c 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）% Y* k5 g q6 x5 L% g, ]
6 N9 ~; T1 E/ ` U1 k" P- D& w, Z0 u 5、最狠的手段 - !important;
( v9 J) l$ H: @8 w! R
. M( Z/ X* N2 S$ J8 t& f% r 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下 .tabd1{ x; [& k% M$ s
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/9 {& E6 Q; W/ |$ W" L
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}/ X8 @5 Z, F( l& r0 b/ A+ U# h
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 |
|
发表于 2008-1-25 02:44
| 