javaeye鐨刪ax鏈榪戝湪浠栫殑blog涓婅繘琛屼簡(jiǎn)涓鍦哄叧浜庡浣曞啓css鐨勮璁猴紝鍏朵腑鍙嶆濆拰璁ㄨ浜?jiǎn)涓浜涘叧浜庡熀浜庢爣鍑嗘垨trick榪涜璁捐鐨勯夋嫨闂錛岃繖涓棶棰樹篃鏄?a target="_blank">David Heinemeier Hansson瀵逛簬XHTML/CSS/Javascript鏍囧噯榪涜RIA寮鍙戣瘽棰?/a>鐨勪竴涓歡灞曘傛垜浠彲浠ヤ粠涓濊冨浣曞湪涓嶅畬緹庣殑鎶鏈腑閫夋嫨涓鏉＄浉瀵瑰畬緹庣殑鎶鏈礬綰匡紵
璁ㄨ鐨勮搗鍥犳槸娣樺疂緗戠殑UED鍥㈤槦鎴愬憳孌電帇鐖峰湪浠栫殑blog涓婂彂琛ㄤ簡(jiǎn)涓綃?a target="_blank">鍏充簬娣樺疂緗戦〉闈㈣璁′笂鐨勫皬鎶宸э紙Trick錛?/a>鐨勪粙緇嶏紝榪欎釜鎶宸ф槸涓轟簡(jiǎn)璁╀竴浜涙潯鐩箣闂寸殑鍒嗛殧綰垮畬鍏ㄤ嬌鐢╟ss鐢熸垚錛屼笉浣跨敤澶氫綑鐨刢lass錛屾鐜嬬埛榪樺姣斾簡(jiǎn)鍏跺畠涓夌甯歌瀹炵幇鏂規(guī)硶銆傚疄鐜版柟娉曞涓嬶細(xì)
浠庡緢涔呭緢涔呬互鍓嶅紑濮嬶紝綾葷洰闂寸殑妯嚎鏃犻潪閮藉彧鏈変笁縐嶃?br /> 1銆佽儗鏅浘
鍦╝鏍囩璁劇疆涓涓猵adding 鐢ㄥ1px楂樹笉絳夌殑鑳屾櫙鍥炬潵position鍒板彸渚с?br /> 緙虹偣錛氭渶鍚庝竴涓繕鏄鐢╟lass鏉ラ殣钘忔帀鑳屾櫙銆?br /> 2銆佺鍙?br /> 鍦ㄦ瘡涓猘鏍囩涔嬮棿鐢?#8220;|”絎﹀彿鏉ュ～鍏呫?br /> 緙虹偣錛歨tml鏂囦歡鍙樺ぇ錛屾枃浠剁淮鎶ゅ彉寰楀緢楹葷儲(chǔ)錛岃屼笖鍦╤tml涓鏃犳剰涔夈?br /> 3銆乤鏍囩鍙充晶鐨刡oder銆?br /> 鍚岃儗鏅浘涓鏍鳳紝鍙笉榪囦嬌鐢╞order-right鏉ヤ唬鏇褲傜己鐐逛篃鍚屼笂銆?br />
鍏跺疄鐜版湁錛堟窐瀹濈殑瀹炵幇鏂瑰紡錛夋槸鍒╃敤ul鐨刼verflow:hidden 鍐嶅皢li鐨刴argin-left:-1px鐨勫仛娉曞仛鍑烘潵鐨勩傝繖鏍風(fēng)殑鍋氭硶灝卞彲浠ュ悓鏃墮伩鍏嶄互涓婄殑緙虹偣浜?jiǎn)銆?br />
涓婇潰鎻愬埌鐨勪嬌鐢╞order鐨勪紶緇熸柟寮忛渶瑕佸湪絎竴鎴栬呮渶鍚庝竴涓厓绱犱笂闈㈡坊鍔燾lass鏉ラ殣钘廱order錛孯ealazy涔熷湪浠栫殑blog涓粰鍑轟簡(jiǎn)涓縐嶄笉閿欑殑瑙ｅ喅鏂規(guī)錛屼粬鎺ㄨ崘榪欐牱鍋氾細(xì)
瀵艱埅欏圭洰闂寸殑绔栫嚎錛屾垜浠線寰閫氳繃border鎴栬卋ackground鏉ュ疄鐜般傜壒孌婇渶姹傛槸錛岀涓欏瑰乏杈規(guī)棤绔栫嚎鎴栨渶鍚庝竴欏瑰彸杈規(guī)棤绔栫嚎銆傛寜鐓т竴鑸殑緙栫▼鏂規(guī)硶錛屾帶鍒剁涓欏硅姣旀帶鍒舵渶鍚庝竴欏瑰鏄撳緱澶氥?br />
鍖哄垎絎竴欏圭殑榪樻湁涓涓ソ澶勬槸錛孋SS鏈変竴涓?first-child鐨勪吉鍏冪礌錛坧seudo element錛夊彲浠ヨ鎴戜滑杞昏屾槗涓劇殑閫夋嫨絎竴涓瓙鍏冪礌銆傞仐鎲劇殑鏄紝褰撳墠鍏ㄧ悆鍗犳湁鐜囨渶楂樼殑嫻忚鍣紝IE6錛屽茍涓嶆敮鎸佽繖涓吉鍏冪礌銆傛垜浠彲浠ユ墜宸ョ粰絎竴涓厓绱犲姞涓奵lass鐒跺悗鍐嶅畾涔夊畠銆傜瓑ie6娣樻卑涔嬫椂錛屽氨鍙互鏀懼績(jī)鐢?:first-child浜?jiǎn)锛岀浉鏉冭 鐨勮瘽锛屾垜瑙夊緱缁櫧W竴欏瑰姞涓奵lass="first"涔熶笉澶變負(fù)瀹炵敤涓諱箟鍋氭硶銆?
Realazy鎻愬嚭鐨勬柟妗堢殑鎬濊礬鏄嬌鐢ㄥ熀浜庢爣鍑嗙殑css閫夋嫨鍣紙selector錛夛紝榪欑鏂規(guī)硶鐨勫ソ澶勬槸鍙互瀹炵幇瀹岀編鐨勫唴瀹逛笌琛ㄧ幇鍒嗙銆備絾鏄幇瀹炵殑闂鏄茍闈炴墍鏈夌殑嫻忚鍣ㄩ兘鍩轟簬鏍囧噯瀹炵幇錛岃繖涔熸鏄熀浜庢爣鍑嗙殑RIA寮鍙戦潰瀵圭殑鏈澶ч棶棰橈紝灝ゅ叾浠SS鍜孞avascript闂鏈澶с俲avaeye鐨刪ax鍦ㄤ粬鐨刡log涓彁鍑轟簡(jiǎn)鑷繁瀵逛簬榪欎釜Trick鐨勪笉鍚屾剰瑙侊細(xì)
鍥犱負(fù)鎴戣寰楄繖涓柟娉曚竴鐐逛篃涓嶅ソ銆傚緢綆鍗曠殑涓涓悊鐢憋細(xì)榪欏彧鏄竴涓猼rick錛屽彧閫傚悎榪欑壒孌婃儏鍐碉紝鍋囪浣犺鎹㈢敤“-”鏉ュ垎鍓插憿錛熶綔涓烘彃鍏ュ垎鍓茬鍙鋒潵璇達(dá)紝鐪熸鍚堢悊浣跨敤css鐨勶紝鎴戠粰涓涓緥瀛愶細(xì)
li ~ li:before { content:'-'; margin:0.25em; }浼樼偣錛氬惈涔夐潪甯告竻鏅幫紝緇存姢鎬ф瀬楂樸備綘鍙互鎹換浣曠殑鍒嗛殧瀛楃錛屽彲浠ヨ瀹氬瓧浣擄紝鍙互璁懼畾棰滆壊銆佸ぇ灝忕瓑鏍峰紡錛岀敋鑷沖彲浠ユ崲鐢ㄥ浘鐗囦綔涓哄垎闅斻?/p> 濂戒簡(jiǎn)錛屼笅闈㈣緙虹偣銆傚敮涓鐨勭己鐐癸細(xì)IE涓嶆敮鎸併?/strong>
hax緇欏嚭鐨勬柟妗堝湪IE涓棤娉曚嬌鐢紝鍏跺疄瀵逛簬澶ч儴鍒嗙綉绔欐潵璇磋繖灝辯浉褰撲簬緇濆ぇ澶氭暟鐢ㄦ埛閮芥棤娉曠湅鍒拌繖縐嶈〃鐜幫紝榪欏氨鎰忓懗鐫澶辮觸銆傛窐瀹漊ED鐨勫皬椹彁鍑?#8220;瀹炵敤絎竴”錛屼粠榪欑瑙傜偣涓婅hax鐨勬柟妗堝氨鏄笉瀹炵敤鐨勩備絾鏄痟ax鎻愬嚭鍙互浣跨敤Dean Edwards鐨処E7 Javascript搴?/a>錛?/p>
IE7榪欎釜搴撳姩鎬佺殑瀹炵幇浜?jiǎn)寰堝IE鍘熸湰涓嶆敮鎸佺殑浼被錛圥seudo Classes錛夛紝璁╁畬鍏ㄥ熀浜庢爣鍑嗙殑css閫夋嫨鍣紙浣跨敤浼被錛夋垚涓哄彲鑳姐傞殢鍚庯紝hax鍦ㄤ粬鐨勫彟澶栦竴綃嘼log“闈㈠悜鏈潵鐨凜SS瀹炶返”涓綔浜?jiǎn)濡備笅璁炬兓I細(xì) hax鎻愬嚭鐨勮繖縐嶆柟寮忔槸姣旇緝嬋榪涚殑錛屼粬榪樺湪“闈㈠悜鏈潵鐨凜SS瀹炶返”涓繘涓姝ョ殑鎻忚堪浜?jiǎn)閫氳繃鑴氭湰淇鐨勬柟寮忚В鍐矷E涓嶆敮鎸佹爣鍑嗕吉綾誨拰澶歝lass闂鐨勮鎯籌紝浠栫殑鏍稿績(jī)鎯蟲硶灝辨槸璁〤SS鐨勫紑鍙戝彲浠ラ伒寰爣鍑嗭紝鍑忓皯涓轟簡(jiǎn)浼橀泤閫鍖栵紙graceful degradation錛夎屽悜鏈浣庢敮鎸侊紙嫻忚鍣級(jí)鍏煎閫犳垚鐨勮〃杈炬柟寮忛檺鍒躲備絾鏄痟ax鑷繁涔熸彁鍑轟簡(jiǎn)榪欑鎬濊礬闈復(fù)鐨勫按灝紝瀹冧婦浜?jiǎn)table甯冨眬鐨勫疄鐢ㄦт環(huán)鍊間負(fù)渚嬶細(xì) “閬靛驚鏍囧噯鐨勪漢媧誨緱姣斾笉閬靛驚鐨勪漢鏇寸瘡”榪欏彞璇濊鍑轟簡(jiǎn)寰堝鍧氭寔鍩轟簬鏍囧噯榪涜CSS璁捐鐨勫紑鍙戜漢鍛樼殑蹇?jī)澹板Q岃繖鍏跺疄鏄疄鐢ㄦу拰鍧氭寔鏍囧噯涔嬮棿鐨勪竴浜涗氦鎹紝鐜板疄涓栫晫涓袱涓柟闈㈠浣曞鉤琛℃鏄箍澶HTML/CSS/Javascript寮鍙戣呴渶瑕佽鐪熸濊冪殑錛屽叧閿殑闂錛岃繕鏄洰鐨勮鏄庣‘銆傜洸鐩殑閬靛驚鏍囧噯錛屼緥濡傚緢澶氬紑鍙戣呯潃榪蜂簬浣跨敤div甯冨眬浠ｆ浛table錛屼絾鏄嵈娌℃湁鏄庣‘鐨勭洰鏍囧氨浼?xì)杩峰け锛宧ax榪欐牱璇勪環(huán)錛?/p>
table甯冨眬 鍏朵粬css鏍峰紡 = 娓呮櫚鐨勫竷灞鎰忓浘鍜屽唴瀹圭殑娣峰悎浣?/p>
div瀹瑰櫒 css鏍峰紡 = 鍐呭鏍峰紡鍒嗙錛屼絾鏄粠css浠ｇ爜涓緢闅劇湅鍑哄竷灞鎰忓浘 鎴戜滑搴旇鐪嬪埌錛孋SS鐨勬剰鍥炬槸灝嗚〃鐜板垎紱匯備粠璁捐鐨勮搴﹀氨鏄疄鐜拌涔夊寲鐨刪tml緇撴瀯錛岃html/xhtml灝介噺鍙〃杈劇函綺圭殑鏁版嵁緇撴瀯銆備絾鏄鏃禼ss閲岄潰鐨勫竷灞鎰忓浘鏄瘮杈冮毦浠ヨ璁板綍鐨勶紙闅句互琚悊瑙ｅ氨闅句互緇存姢錛岄毦浠ラ噸鏋勶級(jí)錛屾湁鍏跺湪鍏呮枼浜?jiǎn)澶ч噺Trick鐨勬儏鍐典笅錛岃繖姝ｆ槸騫垮ぇ紼嬪簭鍛?璁捐浜哄憳闇瑕佽В鍐崇殑錛屾垜浠槸鍚﹀簲璇ラ氳繃涓嶆柇鍦伴噸鏋勬潵鎵懼埌榪欎釜鐭涚浘鐨勫鉤琛＄偣鍛紵嬈㈣繋澶у璁ㄨ銆傛渶鍚庨檮涓婃窐瀹漊ED鍥㈤槦鐨勫皬椹葷粨鐨勬窐瀹滳SS緙栫▼鍘熷垯錛?/p>
IE7鏄竴涓彲浠ヨIE鍍忔爣鍑嗘祻瑙堝櫒涓鏍峰伐浣滅殑Javascript搴撱傚畠淇浜?jiǎn)寰堝CSS闂錛岃PNG鍦↖E5鍜孖E6涓嬫甯稿伐浣溿?
鎴戞帹宕囦竴縐嶉潰鍚戞湭鏉ョ殑CSS瀹炶返銆?strong>鍗沖ぇ鑳嗛噰鐢–SS2.1鐢氳嚦閮ㄥ垎CSS3鐨勭壒鎬с?/strong>鍥犱負(fù)緇濆ぇ澶氭暟鐗規(guī)э紝Firefox銆丱pera銆?Safari絳夐兘宸茬粡寰堝ソ鐨勬敮鎸佷簡(jiǎn)銆侻SIE7涔熸敼榪涗簡(jiǎn)璁稿錛屽皢鏉E涔熸棤鐤戠粓絀朵細(xì)瀹屽叏鏀寔CSS2.1銆傚浜庣洰鍓嶇殑IE錛岄櫎浜?jiǎn)graceful degradation鐨勬柟寮忥紙瀹為檯涓婃暣涓唴瀹規(guī)牱寮忓垎紱葷殑鍘熷垯鍜岃壇濂界殑CSS璁捐鍙互紜繚榪欑偣錛屾瘮濡傛窐瀹濅互鍓嶇殑“瑁鎬綋”鎵浣撶幇鐨勶級(jí)錛屽彲浠ヨ冭檻閫氳繃鐗瑰畾鎵嬫鏉atch涔嬨?br />
鍦ㄨ繖鐐逛笂錛屾垜蹇呴』璇達(dá)紝鎴戝師鏉ヤ篃鏄竴鐩村潥鎸佸彧鐢╥e6鐨剆elector鐨勩傛槸浠涔堟敼鍙樹簡(jiǎn)鎴戯紵灝辨槸Dean Edwards鐨処E7錛佸畠鐨勫嚭鐜頒笉浠呭湪浜庡疄璺典環(huán)鍊尖斺斿嵆鎻愪緵浜?jiǎn)涓涓浜嶪E鐨勮ˉ涓侊紝璁╁紑鍙戣呭彲浠ョ洿鎺ュ啓C(jī)SS2鐢氳嚦CSS3銆?鎴戣涓哄嚭鐜拌繖鏍瘋鍒虹殑鎯呭喌錛屽嵆閬靛驚鏍囧噯鐨勪漢媧誨緱姣斾笉閬靛驚鐨勪漢鏇寸瘡錛屾槸寰堟湁闂鐨勩?/strong>榪欑鐭涚浘鍦ㄦ垜韜笂瀛樺湪鐫錛?001騫寸殑鏃跺欐垜鍦ㄦ煇bbs涓婂彂浜?jiǎn)涓催_(dá)紝澶ф暟 table甯冨眬涔嬬姜錛屼絾鏄繃浜?jiǎn)鍑犲ぉ鎴戝張璺戜笂鍘昏table甯冨眬鍦ㄦ煇縐嶆儏鍐典笅涔熷彲浠ョ敤鐢ㄣ?dlee鍚屽織璨屼技鍒扮幇鍦ㄤ篃璺熸垜褰撴椂涓鏍楓傚鏋滀綘紜疄璁や負(fù)錛宼able甯冨眬浠庡疄鐢ㄤ富涔夎搴︽棤娉曡瀹屽叏鍚﹀畾錛岄偅DHH鍚屽織閲囩敤瀹炵敤涓諱箟鐨勮搴︽潵鍔涙尯 html/css/js灝變篃鏈夌偣蹇?jī)铏氬Q岄偅涓爣棰樹篃灝辨樉寰楀甫鐐逛換鎬у懗閬?#8230;…
浠庡疄鐢ㄤ富涔夎搴﹁錛岃皚鎱庣殑table甯冨眬涔熻鏇寸畝鍗曪紝鍥犱負(fù)瀹冩洿濂界殑鏄犲皠鍒頒簡(jiǎn)grid妯″瀷涓娿傚鏋滀綘杞敤div/span錛?strong>鏍囩鏄竻鏅頒簡(jiǎn)錛屼絾鏄痗ss鏄販涔辯殑錛?/strong>榪欎簺灞炴э紙css灞炴э級(jí)鏄垎鏁ｇ殑錛宑ss浠ｇ爜鏃犳硶鍙嶆槧鏁翠綋錛屾棤娉曡褰曚綘鐨刧rid 甯冨眬鎰忓浘錛佽繖鏄負(fù)浠涔堟垜浠粡甯歌鎴戞湁涓涓猚ss trick鐨勫師鍥狅紝瀹冩槸trick鑰屽凡錛屾槸浣犺揪鍒版渶緇堢洰鐨勭殑鎵嬫錛屼絾鏄綘鐨勭洰鐨勶紝浣犵殑鎰忓浘錛屾病鏈夊ソ濂藉姞鍏ユ枃妗ｇ殑璇濓紝閭ｇ淮鎶よ搗鏉ユ亹鎬曚篃涓嶈寰楄交鏉俱?/strong>
鑳界鍚堣繖涓や釜鏉′歡鐨勬渶綆媧佺殑鍐欐硶錛屽氨鏄垜浠殑鐩爣銆?
]]>