天天看点

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