DIV+CSS布局网页必须考虑的浏览器兼容的技巧

黄继华

浏览: 42923 次
性别:
来自: 上海

最近访客更多访客>>

胡铭哈哈

wei_wang1399

tgb

liaoyang.777

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (109)

社区版块

存档分类

DIV+CSS布局网页必须考虑的浏览器兼容的技巧

1,盒解释器的不同解释. #box{
0 l& m7 v: k' U Y1 f; a# {width:600px; //for ie6.0-4 w. |* g0 D5 n3 `2 J8 ]
/ ~- L1 T, P; k: /
w/idth:500px; //for ff+ie6.0
. X$ I1 k4 W8 _% c- M2 Z}5 z% Z! E z, ]% |" ~
#box{9 C4 f/ {, @9 V# ^1 a( |9 m- Z0 b
width:600px!important //for ff
P8 q# r, U/ X% t% ?( }) ywidth:600px; //for ff+ie6.0
. `" ?, o; i$ r7 z, H6 Uwidth /**/:500px; //for ie6.0-1 f- P T4 k( E" U# H2 S5 r
}9 u4 q! T `. U

$ P+ @8 s0 |$ a4 Z4 G6 j. u5 f1 p- [* i
) p2 t8 w. p' Q( /1 q+ B" `
2,在ie中隐藏css,使用子选择器
. Y' Q4 {4 E) N& ]5 p) b$ v/ P8 e) `0 U) v9 y) q' y
html>body #box{ }$ Y7 y# b: O% N
r* C3 G1 _& S* ?' N
/ T! N+ p9 {6 E6 ~" {( ~
: M( n1 G) Z% ?; ?2 D" X
3,只有ie识别* f- K& e7 y. M* Q
*html #box{ }
$ I0 s( T Z% V
+ Z1 x2 ?0 A1 l9 e& H
: x3 L2 z- l: H" /! k+ @$ I" }$ s
4,在ie/win有效而ie/max隐藏,使用反斜杠
: Y& I2 x6 N6 z" [0 [/* / */
6 M' @, h8 v! n$ R3 ~, H1 @: m! M0 b
0 P1 K5 b9 B0 Q$ S2 |4 s1 }

' O$ C6 L% [1 t! T5,给ie单独定义样式- O. y' r9 y: S) S- b( L& n1 u6 }
! u, I, M6 F y6 E. }
/ R6 a+ _- q( r' y
2 i6 Q& N4 X" {: s r0 f
6,浮动ie产生的双倍距离
' f5 @+ S% `1 `& ~- J* V, }#box{
; k& k1 k+ c, @+ O# a, w& A. d8 ]float:left;+ K9 ]' k% Z9 O: F
width:100px;- x: d+ t% {+ ^6 x4 /
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
6 c" ~2 y+ G/ M6 k {& Edisplay:inline; //使浮动忽略
( G/ T+ U% v- T9 g8 k' H4 L}, _! n9 V" M+ k

5 Y, A5 m1 v! f7 J9 H: L/ H/ x) R1 g- `! y
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
' ?, |1 o4 y1 g/ W# T#box{
5 s5 T; W, |' G& [2 t% @1 `7 /7 Hdisplay:block; //可以为内嵌元素模拟为块元素* N* S( i8 p4 p' {! @, y6 I
display:inline; //实现同一行排列的的效果
; w& Y2 o( K* F1 N9 cdiplay:table; //for ff,模拟table的效果) ^$ E+ a: X1 I7 m: o
}' u8 X. U' _: E/ ~) ?8 S
6 A. _5 |3 d4 r2 L! y! I* E
# l7 d9 l) H8 o: J' i* H
5 p2 B" I+ r" o4 P C
7,for oprea only
0 }- u7 ^% k! h! Y@media all and (min-width:0px){/* opera */2 ?' A) b* Z) ^9 J# M$ a
#box{ }
4 d& c; A2 J5 H5 s Q* n}4 i; n" D5 `& p' U) O, x

+ ^( u9 {+ K& R& W/ U% Q7 X+ @* j) W0 s7 |% }, M, |
8,IE与宽度和高度的问题7 Z9 v# ?% U& x
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
5 V4 l! d2 K. a+ g正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
: s$ N, I- b# r$ ^& Z! W0 d K$ t* |! D w9 n* n
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
4 d" s- T0 ]# K6 O; Q' o# y* o/ u
; X' w: ~6 s1 ]7 g2 w( c#box{
: C# L$ k9 f" h6 ^% m& w3 {$ {width: 80px;; R ^- p# b; U# |
height: 35px;
" q+ M4 x; ~. k& x' {0 ^0 U) B}( R5 A! Q- U' [, V1 u
html>body #box{0 V0 t1 ^4 b- v t: X
width: auto;8 H, C6 p3 O- ~; f+ p0 m# P; a: _: f
height: auto;0 H( S- D3 c" s# z" v$ d) e
min-width: 80px;& {! J1 V2 D# w9 b1 {2 l2 r8 O) r s9 W
min-height: 35px;4 S m S- u) G3 u4 h
}4 U& p- K; ]% I6 v3 i5 J! H

, U2 q% p% v6 v0 b; G7 u
0 e4 p) W- ]% I. g. n. {! x% `( V( M
! b3 x, p" f& ~0 s7 b" R; k2 _9,页面的最小宽度9 I& h7 _* e8 D9 X

+ W2 Y5 E& k5 o! E% F% K. ?7 Gmin-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类，CSS这样设计：
* @& ~ }5 ? W
5 `$ ?3 _ J2 A4 T! q7 ^#container{
' @* _3 _( X) o$ h( T+ X8 |min-width: 600px;( F: L. p- ]. b- f. d$ k
width:expression(document.body.clientWidth < 600? "600px": "auto" );
* q' A' m; O5 D; H* J8 K( /% d# F: a, P}
) X- v; u4 L+ n! h+ s
0 m* T! m; e, E1 H4 /6 U% y/ e1 @4 s1 u' m, U% r7 P2 u

& C/ n. }6 u' ^" e( r( x第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7 w! E! i1 h' t8 l4 c- m

! m* W% X @/ C同样的办法也可以为IE实现最大宽度：
" [0 |- G7 j) {#container i$ K' z3 w" w6 U( Z
{) y" P6 g2 L* |% q- Z6 /: h3 f
min-width: 600px;
( k0 [" d' I% j& M3 Y/ e# [: imax-width: 1200px;: J$ Q) /% K; m; z7 t
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
1 D& R3 c6 P: T9 I$ `+ J}
8 t1 p( g. `6 y' ^
9 z3 J t! H* // ]( B
) I- I& v# S6 Y% Q$ c
, _4 r6 I8 F* U5 l/ `+ ]7 J10,清除浮动
/ _3 ? v% g! R7 j9 d7 N3 k.hackbox{
0 V: l/ L2 C: b+ l! Z- sdisplay:table; //将对象作为块元素级的表格显示, C3 |4 R4 T+ M. T1 J
}
n; G/ /, {; k5 {, S7 X或者
" x; d- t, G! S0 C, t.hackbox{
^* X3 j" k" q* d/ H' x. ?! nclear:both;: u9 T3 y! f! i# i& E
}0 C X& L7 Y9 N* T" x
* v) Q% R2 I' Q) [% h) S, x
j3 c7 l5 `& n x4 M/ z
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。-------这种的最麻烦的......1 e" W/ G0 y5 D( l8 B) u' }
#box:after{! T, P% b7 G: I6 L% c, W* {
content: "."; ( i; q6 ?* A8 q ^/ L: ~: X
display: block;& j2 j# n+ L. E; w. o! i
height: 0; % }6 u- s/ O; C
clear: both;
; @( I, `) T( q0 M) }5 R* svisibility: hidden;
, E6 y3 Z5 V, ^: r7 F+ {; y} " ?) ~" j- J6 I7 f- ~4 D- o

8 o. G7 h8 j5 N0 W# ~/ I2 r( c6 _+ n& j

' T' A0 N% }$ a6 A11,DIV浮动IE文本产生3象素的bug
t- q8 C% h8 ^左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
9 M6 r1 S! a8 y. g) w7 @#box{
* o' Q" V) ]0 J% P t1 C3 ?float:left;9 p* ]/ G1 E- s7 ?9 /
width:800px;$ q/ y. L1 c# O" I1 d2 J
}
0 g+ v3 s; e# {* n! {% s' v' C#left{/ c( S' ]% J; v* y1 V
float:left;
7 N$ L7 d: x# L& ~& B* [width:50%;0 i, x% |$ f) n. q1 v
}
3 G7 L- k; m- D4 b#right{
2 `2 q& u3 I- s; m2 U7 bwidth:50%;3 X0 r& x% e% p' d# [/ r4 ~4 ?7 S
}* w/ w) m% n/ C# R
*html #left{
1 F5 R. Z4 r8 l: A: j9 N0 imargin-right:-3px; //这句是关键+ N" ]9 T. _+ I2 d- Y4 J
}
! V# W1 N8 d6 M" N: r6 g
% `) [+ p4 f9 I! aHTML代码* [. K. y! ?/ k" w
<div id="box">
" I t& I3 U+ v0 L' c' z: G<div id="left"></div>! Y9 e+ U0 Y3 l1 ]4 [
<div id="right"></div>' A0 y- D- f( y# m
</div>
, ~! B+ D3 g1 y" n3 q( P1 N& W% k% i/ L( /

9 G: Y- c3 H7 b( B' y( i- N) z7 `) n% [5 Y
12,属性选择器(这个不能算是兼容,是隐藏css的一个bug)
3 b; D3 t' E9 G$ k* G; k( Pp[id]{}
- f+ {. z9 b" X" E/ d5 u) o3 {* wdiv[id]{}
9 c2 M4 I1 B& b0 Z/ i. X& V6 b9 U( f. z; @
( `( F. ^5 m* P. Q
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用# r" V; W( o# n: {
( y8 M" g1 p; B u% g
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

使用CSS样式表布局网页兼容要点分析

IE vs FF
CSS 兼容要点：6 R& S6 k% O4 o! P+ n
" {* y. B% |% f) v( d! T
DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中5 q: S$ E T# P- t+ I- }. ^
4 Q3 X7 T3 Z# Y4 G0 j
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width" J6 ?6 Q3 h" ]# o2 v* r; {0 L$ z" T

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
/ Q* ~: N: @& R# F4 y. p3 l
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
N- Y W; S% ~) i- ^, D
XHTML+CSS兼容性解决方案小集
使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^7 S: w1 P/ f$ h, I' }$ ]9 L/ U1 E

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： M4 P# n( n- y9 M& f6 r

div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}5 |6 t, W5 m$ j# Y, P0 r
，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）3 Y. F' b2 M" v6 f8 @4 z
$ V! y( z& n" U. x
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}
就能解决大部分问题

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为/ g5 d4 t1 l- Z! n9 M4 F
1 k/ Q4 G6 c" `+ Y; G+ y
<script type="text/javascript">2 z* v/ T4 C# B5 J
就可以了

分享到：

关于CSS浏览器兼容问题整理(IE6.0、IE7.0 ... | FireFox和IE浏览器对于DIV+CSS设计的区别 ...

2009-01-13 23:38
浏览 351
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV+CSS布局网页必须考虑的浏览器兼容的技巧

DIV+CSS布局网页必须考虑的浏览器兼容的技巧

使用CSS样式表布局网页兼容要点分析

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV+CSS布局网页必须考虑的浏览器兼容的技巧

DIV+CSS布局网页必须考虑的浏览器兼容的技巧

使用CSS样式表布局网页兼容要点分析

评论

发表评论

相关推荐

最近访客更多访客>>