杞?杞藉?板??锛?http://blog.sina.com.cn/s/blog_6158b3f90100z8eh.html
CSS娴?瑙??ㄥ樊???ㄦ?荤?モ????娆㈣??ㄧ嚎浜ゆ????荤?锛?
? ? ? ?CSS瀵规?瑙??ㄧ???煎?规?ф???惰?╀汉寰?澶寸????璁稿?浣?浜?瑙ｅ?涓?????宸ц?????,灏变?瑙?寰?涔?涓????句?,浠?缃?涓??堕??浜?IE6,7涓?FireFox???煎?规?у????规?骞舵?寸??浜?涓?涓???瀵逛?web2.0??杩?搴?璇峰敖????html?煎???浠ｇ??,??涓?DOCTYPE 褰卞?? CSS 澶???,浣?涓?3C??????,涓?瀹?瑕??? DOCTYPE澹板????
CSS??宸?
1.div?????村?涓???棰? ?vertical-align:middle; 灏?琛?璺?澧????板???翠釜DIV涓??烽?? line-height:200px; ?跺?????ユ??瀛?锛?灏卞???村?涓?浜???缂虹?规??瑕??у?跺??瀹逛?瑕??㈣?
2. margin????????棰? ?璁剧疆涓?loat??div??e涓?璁剧疆??margin浼???????杩???涓?涓?ie6?藉???ㄧ??bug??瑙ｅ?虫?规????ㄨ?涓?div???㈠??涓? display:inline; 渚?濡?锛? <#div id=??imfloat??> ?稿???css涓?#IamFloat{ float:left; margin:5px; display:inline;}
3.娴???e浜х????????璺?绂??#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?????垫?ヤ娇??杩??烽??棰?灏卞ぇ浜?锛?濡??????ㄥ?藉害??楂?搴??姝ｅ父??娴?瑙??ㄩ??杩?涓や釜?煎氨涓?浼???锛?濡???????in-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褰?????灏?瀹藉害?ヤ娇??涓轰?璁╄?涓??戒护??E涓?涔??界?????浠ユ??涓?涓?<div> ?惧??<body> ??绛句?锛??跺??涓?iv??瀹?涓?涓?绫? ?跺??CSS杩??疯?捐?★? #container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? "600px": "auto" );} 绗?涓?涓?min-width??姝ｅ父??锛?浣?绗?2琛???width浣跨?ㄤ?Javascript锛?杩?????IE??璁ゅ?锛?杩?涔?浼?璁╀???HTML??妗ｄ?澶?姝ｈ???瀹?瀹???涓???杩?Javascript???ゆ???ュ???版??灏?瀹藉害??
6.DIV娴???E????浜х??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浣跨??ine-height灞??ф????缁?#layout浣跨?ㄥ?哄??楂???瀹姐??椤甸?㈢???灏介??绠?????
8.float??div???? ;娓??ゆ诞??????搴?楂?搴?
?? 渚?濡?锛?<#div id=??floatA?? ><#div id=??floatB?? ><#div id=?? NOTfloatC?? >杩?????NOTfloatC骞朵?甯???缁х画骞崇Щ锛?????甯???寰?涓?????(?朵腑floatA??floatB??灞??у凡缁?璁剧疆涓?float:left;) 杩?娈典唬????E涓?姣?????棰?锛???棰??哄??F????????NOTfloatC骞堕??float??绛撅?蹇?椤诲?float??绛鹃????????<#div class=??floatB??> <#div class=??NOTfloatC??>涔??村??涓? < #div class=??clear??>杩?涓?div涓?瀹?瑕?娉ㄦ??浣?缃?锛???涓?蹇?椤讳?涓や釜?锋??float灞??х??div??绾э?涔??翠??藉???ㄥ?濂??崇郴锛?????浼?浜х??寮?甯搞??骞朵?灏?clear杩?绉??峰?瀹?涔?涓轰负濡?涓??冲??锛? .clear{ clear:both;}
?′?涓哄???wrapper ?? div 涓?瑕?瀹?姝婚??搴?涓轰?璁╅??搴??借???ㄩ??搴?锛?瑕???rapper???㈠??涓?overflow:hidden; 褰?????float?? box???跺??锛?楂?搴????ㄩ??搴???E涓?????锛?杩??跺??搴?璇ヨЕ??IE??layout绉???灞???涓??剁??IE??锛?)??oom:1;??浠ュ???帮?杩??峰氨杈惧?颁??煎?广?? 渚?濡???涓?涓?wrapper濡?涓?瀹?涔?锛? .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
?㈠?逛?????,??浠??ㄥ???澶???css??杩板???藉氨??float:left.?????跺????浠???瑕???????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瑙ｅ?充?
?ｄ???loat ????(??甯搁??瑕?!) ?充? clear float ??????????瑙? [How To Clear Floats Without Structural Markup],灏?浠ヤ?浠ｇ??????lobal CSS 涓?,缁???瑕???????div??涓? class="clearfix" ?冲??,灞¤??涓??? .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} ????杩??疯?剧疆锛?.hackbox{ display:table; //灏?瀵硅薄浣?涓哄????绱?绾х??琛ㄦ?兼?剧ず}
9.楂?搴????搴? ?楂?搴????搴???褰???灞?瀵硅薄??楂?搴??????????跺?灞?楂?搴???借???ㄨ?琛?璋???锛??瑰????褰???灞?瀵硅薄浣跨??argin ??paddign ?躲?? 渚?锛? #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p瀵硅薄涓?????瀹?lt;/p> </div> 瑙ｅ?虫?规?锛???瀵硅薄涓?涓?????2涓?绌虹??div瀵硅薄CSS浠ｇ??锛?.1{height:0px;overflow:hidden;}????涓?IV??涓? border灞??с??
10 .IE6涓?涓轰?涔??剧??涓???绌洪??浜х?? 瑙ｅ?宠?涓?BUG???规?涔???寰?澶?,??浠ユ???瑰??html??????,????璁剧疆img 涓?isplay:block ????璁剧疆vertical-align 灞??т负 vertical-align:top | bottom |middle |text-bottom ?藉??浠ヨВ??
11.濡?浣?瀵归?????涓?????杈??ユ? ???涓? vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>
12.web????涓?瀹?涔?id涓?class??浠?涔??哄???? ?涓?.web????涓???涓?瀹硅?搁??澶?ID??,姣?濡? div id="aa" 涓?瀹硅?搁??澶?2娆???class 瀹?涔?????绫???璁轰???浠ユ??????澶?, 杩??烽??瑕?澶?娆″??ㄧ??瀹?涔?渚垮??浠ヤ娇?ㄤ?. 浜?.灞??х??浼???绾ч??棰? ID ??浼???绾ц?楂?浜?class,??涓??㈢??渚?瀛?涓?.?逛究JS绛?瀹㈡?风??????,濡????ㄩ〉??腑瑕?瀵规??涓?瀵硅薄杩?琛???????浣?,?ｄ???浠ョ?浠?瀹?涔?涓?涓?ID,???????藉?╃?ㄩ????椤甸?㈠??绱???涓???瀹??瑰??灞??ф?ユ?惧?板??,杩????稿?规氮璐规?堕?磋?婧?,杩?杩?涓?濡?涓?涓?ID?ュ?绠???.
13. LI涓???瀹硅?杩??垮害??浠ョ???ュ?锋?剧ず???规? ?姝ゆ?规????ㄤ?IE涓?OP娴?瑙???<style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style>
14.涓轰?涔?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>
15.涓轰?涔???娉?瀹?涔?1px宸??抽??搴???瀹瑰???IE6涓?杩?涓???棰?????涓洪?璁ょ??琛?楂???????,瑙ｅ?崇???规?涔???寰?澶?,渚?濡?:overflow:hidden | zoom:0.08 | line-height:1px
16.??涔??锋???借?╁??剧ず??LASH涔?涓????瑙ｅ?崇????娉???缁?FLASH璁剧疆???? <param name="wmode" value="transparent" />
17.???蜂娇涓?涓?灞????村?涓?浜?娴?瑙??ㄤ腑 杩?????浠?浣跨?ㄧ?惧??姣?缁?瀵瑰??浣?,涓?澶?琛ヤ?璐??肩???规?,璐??肩??澶у?涓哄?惰??韬?瀹藉害楂?搴??や互浜? <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??绛惧??F涓?榛?璁ゆ????padding?肩??,????E涓?????margin榛?璁ゆ??????浠ュ??瀹?涔? ul{margin:0;padding:0;}灏辫?借В?冲ぇ?ㄥ????棰?
6. FORM??绛??杩?涓???绛惧??E涓?,灏?浼?????argin涓?浜?杈硅?,????F涓?margin????0,??姝?濡????虫?剧ず涓?????浠ユ??濂藉??ss涓???瀹?margin?? padding,??瀵逛???袱涓???棰?,????css涓?涓???棣????戒娇?ㄨ??风???峰?ul,form{margin:0;padding:0;}缁?瀹?涔?姝讳?,??浠ュ???㈠氨涓?浼?涓鸿?涓?澶寸?间?.
7. BOX妯″??瑙ｉ??涓?涓??撮??棰? ???F??IE 涓???BOX妯″??瑙ｉ??涓?涓??村?艰?寸?稿樊2px瑙ｅ?虫?规?锛?div{margin:30px!important;margin:28px;} 娉ㄦ??杩?涓や釜 margin??椤哄?涓?瀹?涓??藉????锛? important杩?涓?灞???E涓??借????锛?浣?????娴?瑙??ㄥ??浠ヨ????????浠ュ??E涓??跺??瑙ｉ????杩??凤? 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; background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; } ?煎?娉ㄦ??????锛?涓?瀹?瑕?灏?xxxx !important 杩??ユ?剧疆?ㄥ????ヤ?涓?锛?涓??㈠凡缁???杩?
10.IE,FF??榛?璁ゅ?奸??棰? ???璁镐?涓??村?ㄦ?辨?ㄤ负浠?涔?瑕?涓??ㄤ负IE??FF??涓?????CSS锛?涓轰?涔?IE杩??疯?╀汉澶寸?硷??跺??涓?杈瑰??css锛?涓?杈瑰??楠??ｄ釜???剁??M$ IE.?跺??瀵逛?css???????????归???IE骞舵病????浠??宠薄???ｄ????讹??抽???ㄤ?IE??FF??榛?璁ゅ?间?涓??疯??宸诧????′?杩?涓???宸э?浣?浼????板???哄?煎??F?? IE??css骞朵????ｄ??伴?撅???璁稿?逛?绠?????css锛?浣?瀹??ㄥ??浠ヤ??ㄢ??!important??杩?涓?涓?瑗夸??? ??浠??界?ラ??锛?娴?瑙??ㄥ?ㄦ?剧ず缃?椤电???跺??锛??戒??规??缃?椤电?? css?峰?琛ㄦ?ュ?冲??濡?浣??剧ず锛?浣?????浠??ㄦ?峰?琛ㄤ腑??蹇?浼?灏?????????绱??借?琛?浜??蜂?????杩帮?褰??朵?娌℃??蹇?瑕??ｄ???锛???浠ュ?逛??ｄ?娌℃????杩扮??灞??э?娴?瑙??ㄥ????ㄥ??缃?榛?璁ょ???瑰??ヨ?琛??剧ず锛?璀?濡???瀛?锛?濡???浣?娌℃????ss涓???瀹?棰??诧??ｄ?娴?瑙??ㄥ????ㄩ??叉????绯荤?棰??叉?ユ?剧ず锛?div?????朵???绱???????锛?濡?????css涓?娌℃??琚???瀹?锛?娴?瑙??ㄥ??灏??惰?剧疆涓虹?借?叉????????锛?绛?绛??朵???瀹?涔????峰???濡?姝ゃ????浠ユ??寰?澶?涓?瑗垮?虹??F??IE?剧ず涓?涓??风???规???????ㄤ?瀹?浠???榛?璁ゆ?剧ず涓?涓??凤???杩?涓?榛?璁ゆ?峰?璇ュ?浣??剧ず???ラ????3涓???娌℃??瀵瑰????????ヨ?琛?瑙?瀹?锛???姝ゅ?逛?杩??逛?灏卞???绘??缃?IE浜???
11.涓轰?涔?FF涓???????娉???寮?瀹瑰?ㄧ??楂?搴?????娴?瑙??ㄤ腑?哄??楂?搴??肩??瀹瑰?ㄦ??涓?浼?璞?E6???ｆ?疯???寮???,?ｆ?????冲?哄??楂?搴????宠?借???寮???瑕????疯?剧疆?????娉?灏辨???绘??height璁剧疆min- height:200px; 杩???涓轰??ч【涓?璁よ??min-height??IE6 ??浠ヨ??峰??涔?: { height:auto!important; height:200px; min-height:200px; }
12.FireFox涓?濡?浣?浣胯?缁??垮??娈佃???ㄦ?㈣? ?浼????ㄧ??E涓??存?ヤ娇??word-wrap:break-word 灏卞??浠ヤ?, FF涓???浠?浣跨??S????amp;#10;???规??ヨВ??<style type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaa</div> <scr墨pt type="text/javascr墨pt"> function toBreakWord(el, intLen){ var ?bj=document.getElementByIdx_x_x(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.getElementByIdx_x_x && !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)">璁?ireFox涓?IE?煎??lt;/div> ??棰???宸????ㄤ?瀹瑰?ㄧ???翠?瀹藉害??娌℃??灏?杈规?锛?border锛???瀹藉害绠??ㄥ?跺??,杩???IE6瑙ｉ??涓?00PX ,??FF??瑙ｉ??涓?20PX,?ｇ┒绔?????涔?瀵艰?寸????棰????澶у?舵??瀹瑰?ㄩ《?ㄧ??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 ?烘?ヤ?锛?瀵?SS???????????伴??棰???娴?瑙??ㄥ?浜?锛?缃?椤靛?煎?规?ф?村樊浜?锛??蹭?濂??界??杩?????浠? 锛?涓鸿В??E7.0???煎?归??棰?锛??炬?ヤ?涓??㈣?绡???绔?锛??板?ㄦ??澶ч?ㄥ???芥????important??ack锛?瀵逛?ie6??firefox娴?璇???浠ユ?ｅ父?剧ず锛?浣???ie7瀵?important??浠ユ?ｇ‘瑙ｉ??锛?浼?瀵艰?撮〉?㈡病??瑕?姹??剧ず锛?涓??㈡??涓?涓?娴?瑙??ㄧ???煎?规?ф?堕??.
绗?涓?绉?锛???CSS HACK???规? height:20px; *height:25px; _height:20px; 娉ㄦ??椤哄??? 杩??蜂?灞?浜?CSS HACK锛?涓?杩?娌℃??涓??㈣??风??娲??? #example { color: #333; } * html #example { color: #666; } *+html #example { color: #999; }
<!--?朵?娴?瑙???--> <link rel="stylesheet" type="text/css" href="css.css" target="_blank" rel="external nofollow" /> <!--[if IE 7]> <!-- ????浜?IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" target="_blank" rel="external nofollow" /> <![endif]--> <!--[if lte IE 6]> <!-- ????浜?IE6??涓?涓? --> <link rel="stylesheet" type="text/css" href="ie.css" target="_blank" rel="external nofollow" /> <![endif]-->
绗?涓?绉?锛?css filter????娉?锛?浠ヤ?涓虹??镐??藉?缃?绔?缈昏??杩??ョ????. ?板缓涓?涓?css?峰?濡?涓?锛? #item { width: 200px; height: 200px; background: red; } ?板缓涓?涓?div,骞朵娇?ㄥ???㈠??涔???css???峰?锛? <div id="item">some text here</div> ??ody琛ㄧ?拌???????ang灞???涓???涓?h锛? <body > ?板?ㄥ??iv??绱???瀹?涔?涓?涓??峰?锛? *:lang(en) #item{ background:green !important; } 杩??峰????涓轰???important瑕??????ョ??css?峰?,?变?:lang???╁??e7.0骞朵?????,??浠ュ?硅??ヨ??涓?浼???浠讳?浣???浜???涔?杈惧?颁? ie6.0涓????风??????,浣???寰?涓?骞稿?扮????,safari???蜂?????姝ゅ?????浠ラ??瑕????ヤ互涓?css?峰?锛? #item:empty { background: green !important } :empty???╁?ㄤ负css3??瑙???,灏界??afari骞朵?????姝よ???,浣???杩???浼????╂?ゅ??绱?,涓?绠℃?????ゅ??绱?瀛????板?ㄧ豢?蹭??板?ㄥ?ㄩ??e??????浠ュ???娴?瑙??ㄤ??? 瀵?E6??FF???煎?瑰??浠ヨ????浠ュ????!important 涓?浜烘??杈???娆㈢?ㄣ??
![css美化input file按钮的代码方法[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)