1.div vertical-align:middle; DIV line-height:200px; ， 。
2. margin float div ie margin 。 ie6 bug。 div display:inline; ： <#div id=”imfloat”> css #IamFloat{ float:left; margin:5px;/*IE 10px*/ display:inline;/*IE 5px*/}
3. ie #box{ float:left; width:100px; margin:0 0 0 100px; // IE 200px display:inline; // } block inline ：block , , , , , ( );Inline , , ( ); #box{ display:block; // display:inline; // diplay:table;
4 IE IE min- ， width height min 。 ， ， ， min-width min-height ，IE 。 ， 。 ， ： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5. min -width CSS ， ， 。 IE ， width 。 IE ， <div> <body> ， div , CSS ： #container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );} min-width ； 2 width Javascript， IE ， HTML 。 Javascript 。
6.DIV IE 3 bug ， ， 3px . #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; // } <div id="box"> <div id="left"></div> <div id="right"></div> </div>
7.IE div ，DIV 。 ， 。 ： #layout line-height #layout 。 。
8.float div ; ; ;
① ：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” > NOTfloatC ， 。( floatA、floatB float:left;) IE ， FF。 NOTfloatC float ， float 。 <#div class=”floatB”> <#div class=”NOTfloatC”> < #div class=”clear”> div ， float div ， ， 。 clear ： .clear{ clear:both;}
② wrapper div , ， wrapper overflow:hidden; float box ， IE ， IE layout ( IE ！) zoom:1; ， 。 wrapper ： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③ , css float:left. n float div , : <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> page , , left center right , page , , page float , page , float, <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> float left 100% DIV
④ float ( !) clear float [How To Clear Floats Without Structural Markup], Global CSS , div class="clearfix" , . /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ ：.hackbox{ display:table; // }
11. ， margin paddign 。 ： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p </p> </div> ： P 2 div CSS ：.1{height:0px;overflow:hidden;} DIV border 。
12 .IE6 BUG , html , img display:block vertical-align vertical-align:top | bottom |middle |text-bottom .
13. vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>
14.web id class .web ID , div id="aa" 2 , class , , . . ID class, . JS , , ID, , , ID .
15. LI IE OP <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style>
16. web IE body html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>
17. 1px IE6 , , :overflow:hidden | zoom:0.08 | line-height:1px
18. FLASH FLASH <param name="wmode" value="transparent" />
19. , , <style type="text/css"> <!-- div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style>
FF IE
1. Div div margin-left, margin-right auto ，IE ，IE body ， text-algin: center; 。
2. (a ) a ， display: block, float: left 。 menubar, a menubar , height, menubar 。
3. hover hover active , , CSS : L-V-H-A Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>
4. cursor cursor: pointer IE FF ， hand IE
5.UL padding margin ul FF padding , IE margin , ul{margin:0;padding:0;}
6. FORM IE , margin , FF margin 0, , , css margin padding, , css ul,form{margin:0;padding:0;} , .
7. BOX FF IE BOX 2px ：div{margin:30px!important;margin:28px;} margin ， important IE ， 。 IE ： div {maring:30px;margin:28px} ， margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8. ( , css bug) p[id]{}div[id]{} IE6.0 IE6.0 ,FF OPera . , , , p[id] , p id .
9. - !important; , .FF ”!important” , IE . .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} ， xxxx !important ，
10.IE,FF IE FF CSS， IE ， css， M$ IE. css ，IE ， IE FF ， ， FF IE css ， css， ”!important” 。 ， ， css ， ， ， ， ， ， css ， ，div ， css ， ， 。 FF IE ， w3 ， IE 。
11. FF IE6 , , ？ height min-height:200px; min-height IE6 : { height:auto!important; height:200px; min-height:200px; }
12.FireFox IE word-wrap:break-word , FF JS <style type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>
13. IE6 FF <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { cursor:pointer; width:200px; height:200px; border:10px solid red } --> </style> <div ōnclick="alert(this.offsetWidth)"> FireFox IE </div> （border） , IE6 200PX , FF 220PX, ？ xml , IE qurks mode, qurks mode、 standards mode , :http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true
IE6,IE7,FF IE7.0 ， CSS 。 ， ， ， IE7.0 ， ： !important hack， ie6 firefox ， ie7 !important ， ！ .
， CSS HACK height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 。 CSS HACK， 。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */
<!-- --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> <!-- IE6 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
，css filter ， 。. css ： #item { width: 200px; height: 200px; background: red; } div, css ： <div id="item">some text here</div> body lang , zh： <body lang="en"> div ： *:lang(en) #item{ background:green !important; } !important css , :lang ie7.0 , , ie6.0 , ,safari , css ： #item:empty { background: green !important } :empty css3 , safari , , , ie 。 IE6 FF !important ， ， 。
div+css
div+css （ “WEB ”） ， HTML （table） ， XHTML ， ， css+div 。 DIV+CSS 。 ：
1. HTML 、
div 。 dreamweaver 。
2. CSS
、 } 。 CleanCSS CSS 。CleanCSS CSS ， 。
3.
， div ， div ， 。
4. border
float 。 border ， 。
5. float clear
MacIE float clear ， float 。 MacIE bug， 。
6. float width
width float bug。 float ， width 。
em px 。
7. float margin padding
IE margin padding float bug。 float margin padding ( float div margin padding)。 hack IE 。
8. float 100%
float 100%， 。 99%。
9. ?
margin、padding ， 。 margin、padding 0、 none 。
10. DTD?
， DTD。
DIV CSS IE6/IE7/FF
CSS , . , , .
、CSS HACK
HACK.
1, !important
IE7 !important , !important IE6 HACK.( . .)
：
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77 FireFox
：
*+html *html IE , firefox . *+html IE7 .
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, */
}
</style>
:
*+html IE7 HACK HTML ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
、 float
clear float [How To Clear Floats Without Structural Markup]
Global CSS , div class="clearfix" , .
：
<style>
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
、
1, FF div padding width height , IE .( !important )
2, .
1). . line-height div , vertical-align: middle.( .)
2). . margin: 0 auto;( )
3, a , display: block;( )
4, FF IE BOX 2px float div ie margin .
5, ul FF list-style padding . , . ( )
6, wrapper div , overflow: hidden. .
7, . cursor: pointer. hand IE.
1 firefox ie6 ie7 css
!important hack， ie6 firefox ，
ie7 !important ， ！
IE7 hack “*+html”， IE7 ， 。
CSS ：
：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
firefox #333，IE6 #666，IE7 #999。
2 css
：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
：
TEXT-ALIGN: center; ； IE 。
mozilla 。 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
， ， DIV ， div，
div MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 。
3
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 ie
#box{ float:left; width:100px; margin:0 0 0 100px; // IE 200px display:inline; // }
block,inline ,Block : , , , , ( );Inline : ,... ( );
#box{ display:block; // display:inline; // diplay:table;
IE min- ， width height min 。 ， ，
， min-width min-height ，IE 。
， 。 ， ：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6
min-width CSS ， ， 。 IE ，
width 。 IE ， <div> <body> ， div ：
CSS ：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
min-width ； 2 width Javascript， IE ， HTML 。 Javascript 。
7
.hackbox{ display:table; // } .hackbox{ clear:both;}
:after（ ）, ， content ，IE ， Ie ，
IE/WIN 。 ......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV IE 3 bug
， ， 3px .
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; // }
HTML <div id="box"> <div id="left"></div> <div id="right"></div></div>
9 ( , css bug)
p[id]{}div[id]{}
IE6.0 IE6.0 ,FF OPera
, , , p[id] , p id .
10 IE
div ，DIV 。
， 。
： #layout line-height #layout 。 。
11
，
margin paddign 。
：
<div id="box">
<p>p </p>
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
： P 2 div CSS ：.1{height:0px;overflow:hidden;} DIV border 。
、CSS IE vs FF
CSS ：
DOCTYPE CSS
FF: div margin-left, margin-right auto , IE
FF: body text-align , div margin: auto( margin-left,margin-right)
FF: padding , div height width, IE , !important height width
FF: !important, IE , !important FF
div : vertical-align:middle; DIV line-height:200px; ， 。
cursor: pointer IE FF ， hand IE
FF: ， display: block, float: left 。 menubar, a menubar , height, menubar XHTML+CSS
XHTML＋CSS ， ， ， ， ^^
1、 mozilla firefox IE BOX 2px ：
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}
， /**/ ， IE5 firefox IE6 ， ， ， ！：）
3、ul Mozilla padding , IE margin
ul{margin:0;padding:0;}
4、 ， xhtml1.1 language ，
< type="text/java">
、10 CSS
1、CSS
CSS ：
：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
！ ： font-size font-family 。 ， font-weight, font-style, font-varient ， ， 。
2、
（Class）， 。 ， ：
<p class="text side">...</p>
P ， ， text side P 。 ， ， CSS 。
： ID， <p id="text side">...</p>
3、CSS border
， ， ：
border: 3px solid #000
3 ， ， 。 。
， 。 ，Border medium， 3 4 ； 。 ， 。
4、CSS
， ， CSS 。
， CSS ， ， ：
<link type="text/css" rel="stylesheet" href="/blog/stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
1 ， 2 ， media 。
CSS ？ CSS 。 CSS CSS 。 display: none ， 。 ， “ ” 。
5、
HTML ， ， ， 。 ， 。
， ：
<h1><img src="/blog/widget-image.gif" alt="Buy widgets" /></h1>
， ， ， alt 。 ：
<h1>Buy widgets</h1>
。 ， CSS：
h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
image height 。 ， ， -2000 ， 2000 ， 。 ， ， 。
6、CSS box
Box IE6 IE ， 。 ：
#box { width: 100px; border: 5px; padding: 20px }
：
<div id="box">...</div>
150 ， IE6 IE 。 IE5 ， 100 。 Box 。
CSS ， 。
#box { width: 150px } #box div { border: 5px; padding: 20px }
：
<div id="box"><div>...</div></div>
， ， 150 。
7、
， ：
#content { width: 700px; margin: 0 auto }
<div id="content"> 。 ， ，IE6 。 CSS ：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
， Content
text-align: left 。
8、 CSS
， vertical-align: middle 。 CSS 。 2em ， ， 。
CSS ？ ， 2em：line-height: 2em ， 。
9、CSS
CSS ， 。 ：
#container { position: relative }
， ：
<div id="container"><div id="navigation">...</div></div>
30 ， 5 ， ：
#navigation { position: absolute; left: 30px; top: 5px }
， ：
margin: 5px 0 0 30px
4 ： 、 、 、 。 ， 。
10、
CSS 。 ， ， CSS：
#navigation { background: blue; width: 150px }
， 。 ？
， ， ， ， 。
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
em ， ， ， ， px。
HTML SPAN DIV
SPAN DIV ，DIV(division) ， 、 、 ， 、 。 SPAN ，SPAN ， ， ， ， SPAN。
<span>SPAN ， ， HTML ， 。 ，<span> 。 ，<div>DIV HTML 。 <div>SPAN ，<div> ， HTML 。
SPAN ， ， HTML ， 。 ， 。 ， DIV HTML 。 SPAN ， ， HTML 。
div 、
，div ，div ： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
margin-left:auto;margin-right:auto; div 。
.style{margin-left:auto;margin-right:auto;}
：
.style{margin:0 auto;}
0 0。 。
：
：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> div </title>
<style type="text/css">
.align-center{
margin:0 auto; /* ，， */
width:500px; /* */
background:red; /* */
text-align:center; /* */
}
</style>
</head>
<body>
<div class="align-center"> div </div>
</body>
</html>
，
， ， body ：
body{text-align:center;}
， div （ ） ： text-align:center;
Flash Div
：
<style>
/* ----- ----- */
html,body{ margin:0px; padding:0px; background:url(images/boydBg.gif) repeat-x;}
img{ border:0px; }
/* ----- ----- */
#head{ width:1000px; height:364px; text-align:center; }
#logo{ height:110px; background-color:#0099CC; background:url(images/home01.jpg) repeat-x; text-align:right; padding-right:420px;}
#nav{ height:54px;}
#banner{ width:950px; height:200px; text-align:center;}
/* ----- ----- */
</style>
</head>
<body>
<!-- -->
<div id="head">
<div id="banner"><iframe marginwidth="0" marginheight="0" src="images/banner.swf" frameborder="0" width="950" scrolling="No" height="200"></iframe></div>
</div>
#banner{margin:0 auto;} -----
#head{margin:0 auto;} ------ ~~
FireFox IE DIV+CSS
1、
IE/Opera： = (margin-left) + width + (margin-right)
Firefox/Mozilla： = (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
ie ff
2、
：div ，ie center， ff left
：mairgin:0px auto;
3、
： DIV ， DIV ，ie DIV ，ff DIV ， DIV ，
： ， ， ， overflow:hidden;
4、clear:both;
： float n DIV， ie ，ff ，
：float clear:both; float
5、 /
：min-width,max-width ff ， ie
：ie min- max-， ie min-width、max-width width ，
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}
6、!important
：ff ie6.0
： 。ie 。
7、
：cursor:hand; ie ，
： cursor:pointer;ie ff
8、
： ie ，ff （0 ）
： padding:0px;
/zz/div+css - Firefox IE - padding-right IE6 2008-01-11 17:33 IE6 ，padding-right 。
[ ]
Div+Css ， width:900px; float 。 ！ ， 。 ， css ， 。 ie firefox ， 。 bug 。 ， ， 。
， float ， div+css 。float:left;float:right; 。 div ， 。 ！ float ？ ， float 。 ！ ， 。 ie ， div float:left; div （ body ）-（ div ）， div ， 。ie firefox ， 。 ， ， ， 。
<style type="text/css">
#div1{}{width:200px;height:80px;float:left;border:1px solid blue;}
#div2{}{width:600px;height:80px;border:1px solid blue;}
</style>
<div>
<div id="div1"></div>
<div id="div2"></div>
</div>
<div style="clear:both;margin-top:20px;" id="div3">
</div>
， ie firefox margin-top:20px; 。。。。
ie div3 margin-top ， firefox 。 ？ ， 。 ， css. ， div2 float:left ， margin-top:20px 。 ， ok ！
ul 。 ie firefox ul{margin-left:10px;} ，
ul{padding:0;margin-left:10px;} padding!=0 ...
!
div+css IE Firefox 2008-08-14 10:57div+css IE Firefox
.
<div><img src="images/index_1.jpg" /> </div>
.
* [size=+0]
｛float：left；｝ ```
IE6 BUG
display:inline
IE6
BUG ， html ， img display:block vertical-align vertical-align:top | bottom |middle |text-bottom .
IE6
IE 3PX BUG ， .right float:left IE6 .left
， vertical-align:middle
FF
[size=+0]
IE6 , ， ？ height min-height:200px; min-height IE6 ：
{
height:auto!important;
height:200px;
min-height:200px;
}
FLASH
FLASH <param value="transparent" /> <param value="opaque" />
， ， .
: TEXT-ALIGN: center; ； IE 。
mozilla 。 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
， ， DIV ， div，
div MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 。
{
width:300px;
margin-left:auto;
margin-right:auto;
}
firefox ie6 ie7 css
!important hack， ie6 firefox ，
ie7 !important ， ！
IE7 hack “*+html”， IE7 ， 。
CSS ：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
firefox #333，IE6 #666，IE7 #999。
min-width CSS ， ， 。 IE ，
width 。 IE ， <div> <body> ， div ：
CSS ：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
min-width ； 2 width Javascript， IE ， HTML 。 Javascript 。
( , css bug)
p[id]{}div[id]{}
IE6.0 IE6.0 ,FF OPera
, , , p[id] , p id .
- !important;
, .FF ”!important” , IE .
， ， 、 float div ， 。 IE ， div 。 Photoshop Firework 。
1. ， Firefox IE：
backgroundrange; *background:green;
// ， Firefox ， ， IE ， ， Firefox *， IE6，IE7 *, ( Firefox,Opera,Netscape) *;。
2. ， IE7 IE6：
background:green !important;background:blue;
// ， IE7 ， ， ， IE6 ， ， IE7 !important*， ， ， ， IE6 !important， ， .
3. ， Firefox，IE7，IE6：
backgroundrange;*background:green !important;*background:blue;
// Firefox ， ，IE7 ，IE6 ， ，Firefox *， ， ，IE7 ， ， ， ， ， ，IE7 。IE6 !imprtant， ， ， 。
：IE *; ( Firefox,Opera,Netscape) *；IE6 *， !important,IE7 *， !important;FF *， !important;
div+css FireFox 。2008-07-15 15:31 CSS vertical-align ， （ DIV ）。
Mozilla, Opera, Safari .， TABLE(display: table;) ， table-cell (display: table-cell), vertical-align ， 。
50%， -50% 。
：
CSS:
body {padding: 0; margin: 0;}body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>
CSS hacks， IE CSS2 #value[id]。
CSS2 #value[id] #value， Internet Explorer 。 .value[class]， .value, 。
div+css Firefox IE6 2008 03 10 02:06div+css Firefox IE6
Firefox display: table-cell; vertical-align: middle; div ， IE6 IE6 css 。 Firefox IE6 ， !important 。Firefox !important ， IE6 !important ， ! important Firefox IE6。
[ ]
<html>
<body>
<div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
<p> ，Firefox only</p>
<p> ，Firefox only</p>
<p> ，Firefox only</p>
</div>
<div style="border: 1px solid red; height: 200px; position: relative;">
<div style="position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p> ，IE6 only</p>
<p> ，IE6 only</p>
<p> ，IE6 only</p>
</div>
</div>
</div>
<div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position: static !important; position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p> ，Firefox IE6 only</p>
<p> ，Firefox IE6 only</p>
<p> ，Firefox IE6 only</p>
IE VS FireFox
CSS ：DOCTYPE CSS
FF: div margin-left, margin-right auto , IE
FF: body text-align , div margin: auto( margin-left,margin-right)
FF: padding , div height width, IE , !important height width
FF: !important, IE , !important FF
div : vertical-align:middle; DIV line-height:200px; ， 。
cursor: pointer IE FF ， hand IE
FF: ， display: block, float: left 。 menubar, a menubar , height, menubar XHTML+CSS
XHTML+CSS ， ， ， 。
1. mozilla firefox IE BOX 2px ：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}
margin ， !important IE ， 。 IE ：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
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 css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
/**/ ， IE5 firefox IE6 ， ， ， ！：）
3.ul Mozilla padding , IE margin
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{margin:0;padding:0;}
4. ， xhtml1.1 language ，
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div+css firefox {clear float } ， FIREFOX ， { ， ， ， ， }
， ， 。 IE FIREFOX ， 。
。clear float
css clear
clear ： 。
float
float： 。
none ， (block-level)， display block。 ， display 。
clear 4 ：
none :
both :
left :
right :
float 3 ：
none :
left :
right : DOCTYPE CSS
FF: div margin-left, margin-right auto , IE
FF: body text-align , div margin: auto( margin-left,margin-right)
FF: padding , div height width, IE , !important height width
FF: !important, IE , !important FF
div : vertical-align:middle; DIV line-height:200px; ， 。
cursor: pointer IE FF ， hand IE
FF: ， display: block, float: left 。 menubar, a menubar , height, menubar
XHTML+CSS
XHTML＋CSS ， ， ， ， ^^
1. mozilla firefox IE BOX 2px ：
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}， /**/ ， IE5 firefox IE6 ， ， ， ！：）
3.ul Mozilla padding , IE margin
ul{margin:0;padding:0;}
4. ， xhtml1.1 language ，
<script type="text/javascript">
1、div+css
utf-8
( - - - )
asp :
<%
function chinese2unicode(Str)
dim i
dim Str_one
dim Str_unicode
for i=1 to len(Str)
Str_one=Mid(Str,i,1)
Str_unicode=Str_unicode&chr(38)
Str_unicode=Str_unicode&chr(35)
Str_unicode=Str_unicode&chr(120)
Str_unicode=Str_unicode& Hex(ascw(Str_one))
Str_unicode=Str_unicode&chr(59)
next
Response.Write Str_unicode
end function
%>
:
<%=chinese2unicode(" ") %>
2、 div+css IE firefox
div+css W3C 。 ie7 ， firefox ， 。
。
1、 div {overflow: hidden;}, div
2、 div div
ul {
margin: 0px;
padding: 0px;
}
li
3、div+css
CSS ：DOCTYPE CSS
FF: div margin-left, margin-right auto , IE
FF: body text-align , div margin: auto( margin-left,margin-right)
FF: padding , div height width, IE , !important height width
FF: !important, IE , !important FF
div : vertical-align:middle; DIV line-height:200px; ， 。
cursor: pointer IE FF ， hand IE
FF: ， display: block, float: left 。 menubar, a menubar
, height, menubar XHTML+CSS
XHTML+CSS ， ， ， 。
1. mozilla firefox IE BOX 2px ：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}
margin ， !important IE ， 。 IE
：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
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 css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
/**/ ， IE5 firefox IE6 ， ， ， ！：）
3.ul Mozilla padding , IE margin
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{margin:0;padding:0;}
4. ， xhtml1.1 language ，
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<script type="text/javascript">
4、div+css （IE5/5.5/6/7/FF）
IE ， 。 ， IE6 FF IE5 IE5.5
， IE5 WEB “ ”， 。
， ， ， ， “IE ”， IE
。 ， 。
CSS HACK ， IE5/IE5.5/IE6/FF HACK ， ， ，
：
!important ， ：
E1{
background-color: red !important;/* */
background-color: blue;
}
IE ， 《 CSS 》 《 CSS 》， IE6 FF ! important
， IE6 !important ， 。 ，IE6
， “blue”； FF “red”。 ， FF IE 。
OK ， FF IE ， IE 。
《 IE6 IE5 -IE ">"》 ， “＞”IE ？ ：
E1{
background-color: red;
＞background-color: blue;
}
FF ， IE ， ， “＞”，
， “＞” IE ， ！ 。（ ： ， “~”、“`”、“
＜” ， IE ， ， “＞”）
：
E1{
＞/*IE only*/background-color: black;
＞/*IE only*/background-color /*IE5.5*/: green;
}
IE6 ； IE5.5 ； IE5 。 IE5.5
， HACK， ， 。 FF、IE5.5、IE6
， IE5 ？ IE5 IE6 OK ， ：
E1{
＞/*IE only*/background-color: red;/*IE5*/
}
E1/*IE5.5+*/{
＞/*IE only*/background-color: black;
}
HACK， “E1/**/{}”， IE5 。 ， IE5 ；
IE5 。
， 。 ：
E1{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
＞/*IE only*/background-color: black;/*IE6*/
＞/*IE only*/background-color /*IE5.5*/: green;
}
， “background-color” ， FF-IE5-IE6-IE5.5。 IE “＞”，
“E1/**/{}” HACK FF 。 ， ：
E1{
width: 500px;
height: 50px;
background-color: red;/*FF*/
＞background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
＞/*IE only*/background-color: black;/*IE6*/
＞/*IE only*/background-color /*IE5.5*/: green;
}
？ ， HACK ， HACK， ！
6、div+css Firefox IE6
Firefox display: table-cell; vertical-align: middle; div ， IE6 IE6 css 。
Firefox IE6 ， !important 。Firefox !important ， IE6 !important ，
! important Firefox IE6。
[ ]
<html>
<body>
<div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
<p> ，Firefox only</p>
<p> ，Firefox only</p>
<p> ，Firefox only</p>
</div>
<div style="border: 1px solid red; height: 200px; position: relative;">
<div style="position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p> ，IE6 only</p>
<p> ，IE6 only</p>
<p> ，IE6 only</p>
</div>
</div>
</div>
<div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position: static !important; position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p> ，Firefox IE6 only</p>
<p> ，Firefox IE6 only</p>
<p> ，Firefox IE6 only</p>
</div>
</div>
</div>
</body>
</html>
7、div+css
，Firefox margin-left: auto; margin-right: auto; IE6 text-align: center;
，Firefox display: table-cell; vertical-align: middle; div ， IE6 IE6 css
。
!important ，Firefox !important ，IE6 !important
div+css CSS 。 IE ， FF 。 IE FF 。 。
CSS CSS 。
： CSS 。
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
img{border:0px;}
ul {margin:0px;padding:0px;}/
ul li {list-style:none;}
CSS ，
：IE FF
IE body{text-align:center;} 。
FF 。 body:{text-align:center;margin:0px auto;}Margin 0 ， 。 FF 。
： （ ）
30px div， ， line- height:30px; 。 line-height:30px; ， ， overflow:hidden;( )
：
width:**px;height:**px;overflow:hidden; 、 。 。
： IE6、IE7、FF css ( )
!important ， IE7 。 IE6、IE7、FF CSS
#1 { color: #333; } /* FF */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
。
FF #333，IE6 #666，IE7 #999;