DIV+CSS布局网页必须考虑的浏览器兼容的技巧
DIV+CSS布局网页必须考虑的浏览器兼容的技巧
1,盒解释器的不同解释. #box{
width:600px; //for ie6.0-4 w. |* g0 D5 n3 `2 J8 ]
/ ~- L1 T, P; k: /
w/idth:500px; //for ff+ie6.0
}5 z% Z! E z, ]% |" ~
#box{9 C4 f/ {, @9 V# ^1 a( |9 m- Z0 b
width:600px!important //for ff
width:600px; //for ff+ie6.0
width /**/:500px; //for ie6.0-1 f- P T4 k( E" U# H2 S5 r
}9 u4 q! T `. U
. u5 f1 p- [* i
) p2 t8 w. p' Q( /1 q+ B" `
2,在ie中隐藏css,使用子选择器
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{ }
" /! k+ @$ I" }$ s
4,在ie/win有效而ie/max隐藏,使用反斜杠
/* / */
$ R3 ~, H1 @: m! M0 b
0 P1 K5 b9 B0 Q$ S2 |4 s1 }
5,给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产生的双倍距离
#box{
float:left;+ K9 ]' k% Z9 O: F
width:100px;- x: d+ t% {+ ^6 x4 /
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}, _! n9 V" M+ k
/ x) R1 g- `! y
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{
display:block; //可以为内嵌元素模拟为块元素* N* S( i8 p4 p' {! @, y6 I
display:inline; //实现同一行排列的的效果
diplay: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
@media all and (min-width:0px){/* opera */2 ?' A) b* Z) ^9 J# M$ a
#box{ }
}4 i; n" D5 `& p' U) O, x
7 X+ @* j) W0 s7 |% }, M, |
8,IE与宽度和高度的问题7 Z9 v# ?% U& x
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
& Z! W0 d K$ t* |! D w9 n* n
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{
width: 80px;; R ^- p# b; U# |
height: 35px;
}( 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
9,页面的最小宽度9 I& h7 _* e8 D9 X
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类，CSS这样设计：
#container{
min-width: 600px;( F: L. p- ]. b- f. d$ k
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
% y/ e1 @4 s1 u' m, U% r7 P2 u
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7 w! E! i1 h' t8 l4 c- m
同样的办法也可以为IE实现最大宽度：
#container i$ K' z3 w" w6 U( Z
{) y" P6 g2 L* |% q- Z6 /: h3 f
min-width: 600px;
max-width: 1200px;: J$ Q) /% K; m; z7 t
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}
10,清除浮动
.hackbox{
display:table; //将对象作为块元素级的表格显示, C3 |4 R4 T+ M. T1 J
}
或者
.hackbox{
clear: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;
visibility: hidden;
} " ?) ~" j- J6 I7 f- ~4 D- o
/ I2 r( c6 _+ n& j
11,DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;9 p* ]/ G1 E- s7 ?9 /
width:800px;$ q/ y. L1 c# O" I1 d2 J
}
#left{/ c( S' ]% J; v* y1 V
float:left;
width:50%;0 i, x% |$ f) n. q1 v
}
#right{
width:50%;3 X0 r& x% e% p' d# [/ r4 ~4 ?7 S
}* w/ w) m% n/ C# R
*html #left{
margin-right:-3px; //这句是关键+ N" ]9 T. _+ I2 d- Y4 J
}
HTML代码* [. K. y! ?/ k" w
<div id="box">
<div id="left"></div>! Y9 e+ U0 Y3 l1 ]4 [
<div id="right"></div>' A0 y- D- f( y# m
</div>
3 q( P1 N& W% k% i/ L( /
( i- N) z7 `) n% [5 Y
12,属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}
div[id]{}
& 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样式表布局网页兼容要点分析
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
就可以了