Webフロントエンド互換問題
15215 ワード
問題のとおりです
先に他のブログからの記事を収集します.http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html
先に他のブログからの記事を収集します.http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html
CSS , , , IE7,6 Fireofx . web2.0 , xhtml , DOCTYPE CSS , W3C , DOCTYPE .
CSS
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:expression(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 ， ， 。 ， ， ， 。 。
51CTO ： 8
， ：
， 1px ， ， ， bug， ， ， 。
， ， ， ， px。 ， ， 。 。 。 。 。 。 ， 。
， ， 。（ ： CSS 3 HTML 5 ）
：
： ， ， margin padding 。
:100%
：CSS *{margin:0;padding:0;}
： ， CSS * 0。
： float ， margin ， IE6 margin
: IE6
：90%（ ，float ）
： float display:inline;
： div+CSS ， div ， div float ， margin ， 。
： （ 10px）， IE6，IE7，
：IE6、7 ，
：60%
： overflow:hidden; line-height 。
： 。 IE8 。 ， 。
： ， display:block float ， margin ，IE6 bug
：IE6
：20%
： display:block; display:inline;display:table;
： ， ， display:block;( input )。 float margin ， IE6 ， float margin bug。 ， display:inline ， 。 display:inline display:talbe。
：
： img ， ， 。
：20%
： float img
： img ， ，img ， img 。 float 。（ margin， ， margin ， ）
： min-height
： min-height CSS ， min-height
：5%
： 200px， ：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
： B/S ， 。 （ 300px） 。 300px； ， ， 。 。
： CSS
： （ ） ， 。 。 ， 。 ， 。
/* CSS hack*/
hacker ， ， IE ， hack 。 hacker 。 hacker 3 ：IE6 ；IE7 ； （IE8 chrome ff safari opera ）
◆IE6 hacker _ *
◆IE7 hacker *
CSS ：
height:300px;*height:200px;_height:100px;
IE6 height:300px 300px； ， *heihgt， IE6 *height:200px ， 200px。 ，IE6 _height, 200px ， 100px；
IE7 300px 。 *height200px ， _height。 200px， height:300px; 300px。 ， 。