兼容性处理要点
T9;o.f S
1、DOCTYPE 影响 CSS 处理 (pxz#B4
:V1ZeNw
2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width Nn4Kt,KY
owVUL~
3、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 21k-ob1Y
eDZ3SIZ
4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 c+M@{EbuN
G,*
uj0g
5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: G u I sM
Rl!WH%;c[X
div{margin:30px!important;margin:28px;} 2"K~:Tm#w
Z]+Xh
注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: Iur} ZAz
yBjWPx?
div{maring:30px;margin:28px} I8>1RXz
v2z/|sG
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important; x%7x^]$
i 58CA?
浏览器差异 *\+'tFT6
1、ul和ol列表缩进问题 pjn%CR`;
B{KD ]
消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; vw
2@}#\:
其中margin属性对IE有效,padding属性对FireFox有效。 k/Ro74f=
"Y0[rSz,UW
[注]经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 !XC7FUO
5!%/j,?
2、CSS透明问题 sVnuSm
r!uAofIi_
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 xKux5u_
FF:opacity:0.6。 FX 3[U+
[注] 最好两个都写,并将opacity属性放在下面。 }y/t~f+
!*-cf$
3、CSS圆角问题 ,#haai(
>o7k%T|l$
IE:ie7以下版本不支持圆角。 &YMj\KmlSg
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 mqw.v$>
[注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。 _,Y79 b6
D bJ(N h
4、cursor:hand VS cursor:pointer NKrk*I"G
Sm5"Q
问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。 z_TK
(;j
解决方法:统一使用pointer。 E{J;-+t
;7hr8?M|
5、字体大小定义不同 {`> x"Y5
T /uu='3
对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。 V96BtVsB
RB2u1]l
解决方法:使用指定的字体大小如14px。 dWA7U6c<
Y/gCtSF
并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)。 $[Ns#7K
y5I7pbe
6、CSS双线凹凸边框 &*iiQ3
IE:border:2px outset;。 <Bwu N,}
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; [Pay<]c6g
`S|gfJ
浏览器bug hwJ.M4
1、IE的双边距bug X'Oo ogu
8}&cE#@
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 2mRso.Ah
U
w)1yzX
解决方案:在这个div里面加上display:inline; {221@ zcCq
< mxUgU
例如: G} p~VLf
xnArYm
<#div id=”imfloat”> +{s^"M2`
C9fJLCufC
相应的css为 JO$0Z
eK`tFs,u
以下为引用的内容: lm+wjhkN
yfU1;MI
复制代码代码如下: &CS= *)>$
#IamFloat{ yO !*pC
float:left; uJ%ql5XDV
margin:5px;/*IE下理解为10px*/ U_:/>8})d
display:inline;/*IE下再理解为5px*/
z\\MLyS
} v>,XJ 7P
#IamFloat{ Q>|<R[.7
float:left; R_-.:n%.z
margin:5px;/*IE下理解为10px*/ 0_ ;-QAd
display:inline;/*IE下再理解为5px*/ [ [Z*n/tr
} >B iJ/[9
^mH^cP?/
关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是,页面采用标准XHTML标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。 s01n[jQ
PJ);d>tz
2、IE选择符空格BUG wz'D4B
今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效。 tFG&~tNc
R+P1 +5
请看以下代码: emTqbO
BeBa4s
Wq]^1g_
复制代码代码如下: ,XR1N$LN8_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> K1jE_]@Z
<html xmlns="//www.w3.org/1999/xhtml"> @2V#bK
<head> c1c8):o+V
<title></title> uq'T:d
<style type="text/css"> ?m0|>[j
<!-- |%Pd*yZA
p{font-size:12px;} Db@$'
p:first-letter{font-size:300%} T=%,^
--> 4~4D1
</style> "5,'K~hz
</head> qi!+Ceo}
<body> lG6P+ Z/nf
$cflF@3
<p>对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p> l]C#bL>i
</body> ~qT5F)$B-
</html> yH/m@#
[/code] 4SlEc|'7@
b1\.hi
Xs}.7
复制代码代码如下: m9M#)<@*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ~HBQQt
<html xmlns="//www.w3.org/1999/xhtml"> kn%i#Fz
<head> , Ox$W
<title></title> gxPu/VD4
<style type="text/css"> #|8Ia:=s
<!-- Nk2n&(~$
p{font-size:12px;} Zo`_vx/{j
p:first-letter{font-size:300%} p?-qlPl
--> )[wB:kG
</style> g^I?u$&E
</head> uo9FLm
<body> Y]VLouzl
<p>对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p> QZ&
4W
</body> L9{y1'')
</html> 4v.{C"M
UMUG~P&@
这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font-size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符”-”。IE有个BUG,在处理伪类时,如果伪类的名称中带有连字符”-”,伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。