天天看點

CSS+div排版遇到的浏覽器相容問題彙總

CSS+div???????扮??娴?瑙??ㄥ?煎?歸??棰?姹???

浠?缃?涓??堕??浜?IE7,6涓?Fireofx???煎?規?у????規?

瀵逛?web2.0??杩?搴?璇峰敖????html?煎???浠g??,??涓?DOCTYPE 褰卞?? CSS 澶???,浣?涓?3C??????,涓?瀹?瑕??? DOCTYPE澹版??.

1.div?????村?涓???棰?

vertical-align:middle;

灏?琛?璺?澧????闆???翠釜DIV涓??烽?? line-height:200px;

?跺?????ユ??瀛?锛?灏卞???村?涓?浜???缂虹?規??瑕??у?跺??瀹逛?瑕??㈣???

2. margin????????棰?

璁劇疆涓?loat??div??e涓?璁劇疆??margin浼???????杩???涓?涓?ie6?藉???ㄧ??bug??

瑙e?蟲?規????ㄨ?涓?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-杩?涓?瀹?涔?锛?浣?瀹???涓?瀹???姝e父??width??height褰?浣???min?????墊?ヤ嬌??杩??烽??棰?灏卞ぇ浜?锛?濡??????ㄥ?藉害??楂?搴??姝e父??娴?瑙??ㄩ??杩?涓や釜?煎氨涓?浼???锛?濡???????in-width??min-height??璇?锛?IE涓??㈡?規??绛?浜?娌℃??璁劇疆瀹藉害??楂?搴???

姣?濡?瑕?璁劇疆?????劇??锛?杩?涓?瀹藉害??姣?杈???瑕?????

瑕?瑙e?寵?涓???棰?锛???浠ヨ??鳳?

#box{ width: 80px; height: 35px;}

html>body #box

{

width: auto; height: auto; min-width: 80px; min-height: 35px;

}

5.椤甸?㈢????灏?瀹藉害

min -width??涓???甯告?逛究??CSS?戒護锛?瀹???浠ユ??瀹???绱???灏?涔?涓??藉?浜???涓?瀹藉害锛?杩??峰氨?戒?璇?????涓??存?g‘??浣?IE涓?璁ゅ?杩?涓?锛???瀹?瀹???涓???width褰?????灏?瀹藉害?ヤ嬌??涓轟?璁╄?涓??戒護??E涓?涔??界?????浠ユ??涓?涓?<div> ?懼??<body> ??绛句?锛??跺??涓?iv??瀹?涓?涓?绫? ?跺??CSS杩??瘋?捐?★?

#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );}

绗?涓?涓?min-width??姝e父??锛?浣?绗?2琛???width浣跨?ㄤ?Javascript锛?杩?????IE??璁ゅ?锛?杩?涔?浼?璁╀???HTML??妗d?澶?姝h???瀹?瀹???涓???杩?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绛?杩?涓??跺??瀹規????????杩瘋??????棰?????浜???瀹規?劇ず涓??烘?ワ?褰?榧??????╄?涓??哄???????闆??瀹圭‘瀹??ㄩ〉????

瑙e?沖??娉?锛?

瀵?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;}

9.瀵逛?????

??浠??ㄥ???澶???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瑙e?充?

10.涓???loat ????(??甯擱??瑕?!)

?充? clear float ??????????瑙? [How To Clear Floats Without Structural Markup],灏?浠ヤ?浠g??????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; //灏?瀵矽薄浣?涓哄????绱?绾х??琛ㄦ?兼?劇ず}

11.楂?搴????搴?

楂?搴????搴???褰???灞?瀵矽薄??楂?搴??????????跺?灞?楂?搴???借???ㄨ?琛?璋???锛??瑰????褰???灞?瀵矽薄浣跨??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>

瑙e?蟲?規?锛?

??瀵矽薄涓?涓?????2涓?绌虹??div瀵矽薄CSS浠g??锛?

.1{height:0px;overflow:hidden;}????涓?IV??涓?border灞??с??

12 .IE6涓?涓轟?涔??劇??涓???绌洪??浜х??

瑙e?寵?涓?BUG???規?涔???寰?澶?,

??浠ユ???瑰??html??????,

????璁劇疆img 涓?isplay: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绛?瀹㈡?風??????,濡????ㄩ〉??腑瑕?瀵規??涓?瀵矽薄杩?琛???????浣?,?d???浠ョ?浠?瀹?涔?涓?涓?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??娉?璁劇疆婊??ㄦ?¢??蹭?

瑙e?沖??娉???

灏?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涓?杩?涓???棰?????涓洪?璁ょ??琛?楂???????,

瑙e?崇???規?涔???寰?澶?

渚?濡?:overflow:hidden | zoom:0.08 | line-height:1px

18.??涔??鋒???借?╁??劇ず??LASH涔?涓???

瑙e?崇????娉???缁?FLASH璁劇疆????

<param name="wmode" value="transparent" />

19.???蜂嬌涓?涓?灞????村?涓?浜?娴?瑙??ㄤ腑

杩?????浠?浣跨?ㄧ?懼??姣?缁?瀵瑰??浣?,涓?澶?琛ヤ?璐??肩???規?,璐??肩??澶у?涓哄?惰??韬?瀹藉害楂?搴??や互2

<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浜?

瑙e?蟲?規???

?瑰??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妯″??瑙i??涓?涓??撮??棰?

??F??IE 涓???BOX妯″??瑙i??涓?涓??村?艱?寸?稿樊2px

瑙e?蟲?規?锛?

div{margin:30px!important;margin:28px;}

娉ㄦ??杩?涓や釜 margin??椤哄?涓?瀹?涓??藉????锛? important杩?涓?灞???E涓??借????锛?

浣?????娴?瑙??ㄥ??浠ヨ??????

??浠ュ??E涓??跺??瑙i????杩??鳳?

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;

濡???瀹??ㄦ病????娉?瑙e?充?浜?缁?????棰?,

??浠ョ?ㄨ?涓??規?.FF瀵逛???!important??浼????ㄤ???瑙f??,

?惰??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锛?涓?杈瑰??楠??d釜???剁??M$ IE.

?跺??瀵逛?css???????????歸???IE骞舵病????浠??寵薄???d????訛?

?抽???ㄤ?IE??FF??榛?璁ゅ?間?涓??瘋??宸詫????′?杩?涓???宸э?

浣?浼????闆???哄?煎??F??IE??css骞朵????d??伴?撅???璁稿?逛?绠?????css锛?

浣?瀹??ㄥ??浠ヤ??ㄢ??!important??杩?涓?涓?瑗誇???

??浠??界?ラ??锛?娴?瑙??ㄥ?ㄦ?劇ず缃?椤電???跺??锛??戒??規??缃?椤電?? css?峰?琛ㄦ?ュ?沖??濡?浣??劇ず锛?

浣?????浠??ㄦ?峰?琛ㄤ腑??蹇?浼?灏?????????绱??借?琛?浜??蜂?????杩幫?

褰??朵?娌℃??蹇?瑕??d???锛???浠ュ?逛??d?娌℃????杩扮??灞??э?

娴?瑙??ㄥ????ㄥ??缃?榛?璁ょ???瑰??ヨ?琛??劇ず锛?璀?濡???瀛?锛?

濡???浣?娌℃????ss涓???瀹?棰??詫??d?娴?瑙??ㄥ????ㄩ??叉????绯葷?棰??叉?ユ?劇ず锛?div?????朵???绱???????锛?

濡?????css涓?娌℃??琚???瀹?锛?娴?瑙??ㄥ??灏??惰?劇疆涓虹?借?叉????????锛?绛?绛??朵???瀹?涔????峰???濡?姝ゃ??

??浠ユ??寰?澶?涓?瑗垮?虹??F??IE?劇ず涓?涓??風???規???????ㄤ?瀹?浠???榛?璁ゆ?劇ず涓?涓??鳳???杩?涓?榛?璁ゆ?峰?璇ュ?浣??劇ず???ラ????3涓???娌℃??瀵瑰????????ヨ?琛?瑙?瀹?锛?

??姝ゅ?逛?杩??逛?灏卞???繪??缃?IE浜???

11.涓轟?涔?FF涓???????娉???寮?瀹瑰?ㄧ??楂?搴?

????娴?瑙??ㄤ腑?哄??楂?搴??肩??瀹瑰?ㄦ??涓?浼?璞?E6???f?瘋???寮???,

?f?????沖?哄??楂?搴????寵?借???寮???瑕????瘋?劇疆???

??娉?灏辨???繪??height璁劇疆min-height:200px;

杩???涓轟??ч【涓?璁よ??min-height??IE6

??浠ヨ??峰??涔?: { height:auto!important; height:200px; min-height:200px; }

12.FireFox涓?濡?浣?浣胯?缁??垮??娈佃???ㄦ?㈣?

浼????ㄧ??E涓??存?ヤ嬌??word-wrap:break-word 灏卞??浠ヤ?,

FF涓???浠?浣跨??S???ョ???規??ヨВ??

<style type="text/css">

<!--

div

{

width:300px;

word-wrap:break-word;

border:1px solid red; }

-->

</style>

<div id="ff">杩?????涓?琛?寰??跨????瀛?aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scr墨pt type="text/javascr墨pt">

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瑙i??涓?????

<?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瑙i??涓?00PX ,??FF??瑙i??涓?20PX,?g┒绔?????涔?瀵艱?寸????棰????

澶у?舵??瀹瑰?ㄩ《?ㄧ??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娴?璇???浠ユ?e父?劇ず锛?

浣???ie7瀵?important??浠ユ?g‘瑙i??锛?浼?瀵艱?撮〉?㈡病??瑕?姹??劇ず锛?

涓??㈡??涓?涓?娴?瑙??ㄧ???煎?規?ф?堕??.

绗?涓?绉?锛???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 绗?涓?绉?绠?娲?锛??煎?規?ф??杈?濂姐??