鍥句腑鏄劇ず浜哘Q璧勬枡鍙互鑷富璁劇疆濂藉弸澶囨敞錛堟爣娉?#8220;1”錛夛紝涓鑸儏鍐典笅鐢ㄤ簬甯姪鐢ㄦ埛鑳芥洿蹇洿瀹規(guī)槗鐨勫皢鍒楄〃涓殑濂藉弸鍜屾綔鎰忚瘑涓殑鏌愪釜鐗瑰畾鐨勪漢鐩稿叧鑱斻傝緗悗錛屾棤璁哄鏂規(guī)庝箞鏀規(guī)樀縐幫紝鑷繁濂藉弸鍒楄〃涓殑鍚嶅瓧閮戒笉浼氬彉錛堟爣娉?#8220;2“錛夛紝鐢辨瑙ｅ喅浜嗕竴浜涚敤鎴風(fēng)粡甯鎬笉鐭ラ亾濂藉弸鏄皝鐨勯棶棰樸備絾鍚屾椂涔熷甫鏉ヤ簡鍙︿竴涓棶棰橈細
“鏄電О”鏈韓鏈澶х殑鎰忎箟灝卞湪浜庝釜鎬у寲浼犳挱錛屽亣濡傦紝鎴戝笇鏈涙垜鎵鏀瑰彉鐨勬樀縐拌兘鍦ㄧ涓鏃墮棿璁╂垜鐨勫ソ鍙嬫敹鍒幫紝鑰屽ソ鍙嬪嵈鍥犱負涓嶆兂鍥犱負鎴戞敼鍚嶅悗涓嶈璇嗘垜浜嗭紝閫間笉寰楀凡瀵規(guī)垜榪涜浜嗗娉ㄦ搷浣滐紝閭ｄ箞鎴戠殑鎰挎湜灝嗘棤娉曡揪鎴愶紝濂藉弸蹇呴』“鏌ョ湅璧勬枡”鏉ヨ鍔ㄦ洿鏂版垜鐨勬渶鏂版樀縐幫紙濂藉弸騫朵笉鐭ラ亾鎴戞敼榪囨樀縐幫級錛?br>
涓漢寤鴻鏄紝鍦ㄥソ鍙嬪垪琛ㄤ腑浠嶇劧鏄劇ず濂藉弸鐨勪釜鎬ф樀縐幫紝鑰屽綋鐢ㄦ埛闇瑕佷簡瑙ｆ浜烘椂錛屽啀鐐瑰嚮璧勬枡錛屼富鍔ㄨ幏鍙栨浜虹殑澶囨敞錛堝鏋滃凡緇忔坊鍔狅級錛岃繖涓嶄粎絎﹀悎浼犵粺鎰忎箟瀵?#8220;澶囨敞”鐨勫畾涔夛紝鍚屾椂涔熶繚鏉冧簡閮ㄥ垎鐢ㄦ埛鐨勪釜鎬у寲灞曠ず闇姹傘?br>
韙忚笍瀹炲疄鍋氫漢錛屽嫟鍕ゆ伋鎭沖仛浜嬶紝鎴戠殑鎶鏈崥瀹紝鏃墮殧涓騫達紝緇х畫鏇存柊錛?/span>
]]>
<style>
#nav ul {
list-style : none ;
}
#nav li {
float : left ;
margin : 0 10px ;
}
#nav a {
text-decoration : none ;
display : block ;
width : 60px ;
border-left : 5px solid #ccc ;
padding-left : 3px ;
raven_on : expression(onmouseover=function(){this.all.tags("span")[1].style.color="rgb(0,106,161)" ; } );
raven_off:expression(onmouseout=function() { this.all.tags("span")[1].style.color="#999"; } );
}
#nav a:hover {
border-left : 5px solid red ;
}
#nav span {
display : block ;
font-size : 12px ;
color : #000 ;
}
#nav .navtext_en {
font-family : Verdana ;
font-size : 10px ;
font-weight : bold ;
line-height : 10px ;
color : #999 ;
}
#nav a:hover [class="navtext_en"] {
color : rgb(0,106,161) ;
}
</style>
<div id ="nav">
<ul>
<li><a href ="#"><span> 榪斿洖棣栭〉 </span><span class ="navtext_en"> Home </span></a></li>
<li><a href ="#"><span> 娉ㄥ唽鐢寵 </span><span class ="navtext_en"> Reg </span></a></li>
<li><a href ="#"><span> 鏈鏂版棩蹇?nbsp; </span><span class ="navtext_en"> Read </span></a></li>
<li><a href ="#"><span> 鍗氬鍒楄〃 </span><span class ="navtext_en"> Insider </span></a></li>
<li><a href ="#"><span> 鍙夋ā鏉?nbsp; </span><span class ="navtext_en"> Template </span></a></li>
</ul>
</div>
#nav ul {
list-style : none ;
}
#nav li {
float : left ;
margin : 0 10px ;
}
#nav a {
text-decoration : none ;
display : block ;
width : 60px ;
border-left : 5px solid #ccc ;
padding-left : 3px ;
raven_on : expression(onmouseover=function(){this.all.tags("span")[1].style.color="rgb(0,106,161)" ; } );
raven_off:expression(onmouseout=function() { this.all.tags("span")[1].style.color="#999"; } );
}
#nav a:hover {
border-left : 5px solid red ;
}
#nav span {
display : block ;
font-size : 12px ;
color : #000 ;
}
#nav .navtext_en {
font-family : Verdana ;
font-size : 10px ;
font-weight : bold ;
line-height : 10px ;
color : #999 ;
}
#nav a:hover [class="navtext_en"] {
color : rgb(0,106,161) ;
}
</style>
<div id ="nav">
<ul>
<li><a href ="#"><span> 榪斿洖棣栭〉 </span><span class ="navtext_en"> Home </span></a></li>
<li><a href ="#"><span> 娉ㄥ唽鐢寵 </span><span class ="navtext_en"> Reg </span></a></li>
<li><a href ="#"><span> 鏈鏂版棩蹇?nbsp; </span><span class ="navtext_en"> Read </span></a></li>
<li><a href ="#"><span> 鍗氬鍒楄〃 </span><span class ="navtext_en"> Insider </span></a></li>
<li><a href ="#"><span> 鍙夋ā鏉?nbsp; </span><span class ="navtext_en"> Template </span></a></li>
</ul>
</div>
]]>
IE涓細
鐢?strong>height:1%
渚嬶細
<
div聽
style
="height:1%"
>
銆銆 < div聽 style ="float:left" >
銆銆 </ div >
</ div >
銆銆 < div聽 style ="float:left" >
銆銆 </ div >
</ div >
闈濱E涓細
鐢?strong>:after
渚嬶細
.pelement:after{銆/*鍦╬element榪欎釜鍏冪礌鐨勫悗杈?/span>*/
銆銆content:"."銆/*鍐欏叆涓涓偣*/
銆銆display:block;聽聽聽聽聽聽/*鍧楃駭甯冨眬鏂瑰紡*/
銆銆clear:both;銆銆/*娓呴櫎宸﹀彸嫻姩*/
銆銆height:0;visibility:hidden;銆銆/*涓嶅彲瑙?/span>*/
}
銆銆content:"."銆/*鍐欏叆涓涓偣*/
銆銆display:block;聽聽聽聽聽聽/*鍧楃駭甯冨眬鏂瑰紡*/
銆銆clear:both;銆銆/*娓呴櫎宸﹀彸嫻姩*/
銆銆height:0;visibility:hidden;銆銆/*涓嶅彲瑙?/span>*/
}
]]>
渚嬩竴錛?BR>
CSS
#box {
color:red !important;
color:blue;
}
color:red !important;
color:blue;
}
HTML
<div id="Box"> 鍦ㄤ笉鍚岀殑嫻忚鍣ㄤ笅錛岃繖琛屽瓧鐨勮壊搴旇涓嶅悓錛?/FONT></div>
榪欎釜渚嬪瓙搴旇鏄ぇ瀹剁粡甯歌鍒扮殑important鐨勭敤娉曚簡錛屽湪IE鐜涓嬶紝榪欒瀛楁槸钃濊壊錛屽湪firefox涓嬶紝涓虹孩鑹詫紝鍏剁敤娉曚笉鍐嶅璇翠簡錛岀湅涓嬩竴涓緥瀛愩?/FONT>
渚嬩簩錛?BR>
CSS
1 #box div{
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
HTML
<div id="Box"> <div class="important_false">榪欎竴琛屾湯浣跨敤important</div> <div class="important_true">榪欎竴琛屼嬌鐢ㄤ簡important</div></div>渚嬩簩涓紝CSS浠ｇ爜絎竴琛岃瀹氫簡box閲岄潰鎵鏈塪iv涓瓧浣撹壊涓虹孩鑹詫紝絎簩琛屽拰絎笁琛岄兘鐢╟lass閲嶆柊瀹氫箟浜嗚嚜韜玠iv鐨勫瓧浣撹壊涓鴻摑鑹詫紝涓嶅悓鐨勬槸錛岀浜岃鏈嬌鐢╥mportant錛岃岀涓夎浣跨敤浜嗭紒
榛樿鎯呭喌涓嬶紝class鐨勪紭鍏堢駭灝忎簬id錛屾墍浠ワ紝絎簩琛屼腑鍗充嬌鐢╟lass閲嶅畾涔変簡鑷韓鏍峰紡錛屼篃鏃犳硶鐢熸晥錛屾墍浠ョ戶鎵跨埗綰у睘鎬э紝榪欒瀛楄繕鏄孩鑹詫紒
浣嗘槸錛岀涓夎涓紝鐢ㄤ簡important鎻愬崌浼樺厛綰э紙鎴栫湅鎴愬己鍒墮噸瀹氫箟錛夛紝鎵浠ヨ繖閲岀殑css寰椾互鐢熸晥錛岃繖琛屽瓧鍙樹負浜嗚摑鑹詫紒
浠庤繖涓緥瀛愶紝寰椾互璇佹槑錛?STRONG>ie瀵筰mportant鐨勫茍涓嶆槸涓嶆敮鎸侊紒
閭ｄ箞涓轟粈涔堝緢澶氫漢閮借ie涓嶈璇嗗畠鍛紵鎴戞兂搴旇鏄ぇ瀹跺疄鎴樹腑鍙兘閮芥病鏈夐亣鍒頒緥瀛愪腑鐨勬儏鍐碉細 褰撲綘鎯蟲彁鍗嘽lass鐨勪紭鍏堢駭鏃舵庝箞鍔烇紵
涔熷氨鏄澶у鍙兘閮藉拷鐣ヤ簡瀹冪殑榪欎竴浣滅敤錛屽彧浜嗚В鍦ㄥ懡鍚嶄負鍚屼竴涓厓绱犵殑CSS浠ｇ爜鍧椾腑錛岀敤瀹冩潵鎻愬崌鎺掑垪欏哄簭鐩稿闈犲墠鐨勪唬鐮佺殑浼樺厛綰э紙渚嬩竴錛夛紒
閫氳繃涓婅竟涓や釜渚嬪瓙錛屽緱浠ユ葷粨錛?BR>
important瀵?nbsp;涓涓壇濂斤紙鎴栬呮槸鏍囧噯錛夌殑嫻忚鍣ㄦ潵璇達紝涓嶄粎浠呮槸浠庨『搴忎笂鎻愬崌浠ｇ爜鐨勪紭鍏堢駭錛岃繕鍙互鐢ㄦ潵鎻愬崌class鐨勪紭鍏堢駭錛堟瘮濡俧irefox錛夛紝浣嗘槸浠嶪E瀵瑰墠鑰呯殑涓嶆敮鎸佸彲浠ョ湅鍑猴紝榪欏彧鏄疘E鐨勪竴澶UG錛岃屼笉鑳借瀹冣滀笉璁よ瘑銆佷笉鏀寔鈥濓紒
鐒惰岋紝涓嶇鎬庝箞鏍鳳紝IE鐨勮繖涓澶UG甯姪鎴戜滑瑙ｅ喅浜嗗緢澶氬吋瀹規(guī)ч棶棰橈紝榪欐樉鐒朵笉鏄歡鍧忎簨錛?BR>
]]>
<div id="mainBox">
<div id="leftbox"></div>
</div id="rightbox"></div>
</div>
涓涓ぇ鐨凞IV錛堜唬鐮佷腑鐨勨渕ainBox鈥濓級閲岋紝宓屽涓や釜灝廌iv錛屽叾涓涓涓猣loat:left錛岀浜屼釜float:right錛岀粨鏋滃彂鐜幫紝鍘熸潵澶х殑DIV鐨勮儗鏅壊娌℃湁浜嗭紝鍏跺疄鏄唴瀹逛負絀烘墍鑷達紝鍥犱負鍐呴儴鐨勮繖涓や釜灝廳iv閮芥誕鍔ㄥ埌浜哅ainBox鐨勪笂灞傦紙z-index錛夈?BR>
瑙ｅ喅鍔炴硶寰堢畝鍗曪紝緇檓ainBox涔熷姞涓婁竴涓?nbsp; float: left 銆?/FONT>
]]>