前端相容性

娴?瑙??ㄥ?煎?規?ч??棰?澶ф???

? JavaScript 3

1. HTML瀵矽薄?峰????棰? 3

2. const??棰? 3

3. event.x涓?event.y??棰? 3

4. window.location.href??棰? 3

5. frame??棰? 3

6. 妯℃??????妯℃??绐??ｉ??棰? 3

7. firefox涓?IE???跺??绱?(parentElement)???哄?? 3

8. document.formName.item(??itemName??) ??棰? 3

9. ????绫誨?矽薄??棰? 3

10. ??瀹?涔?灞??ч??棰? 3

11. input.type灞??ч??棰? 3

12. event.srcElement??棰? 3

13. body杞藉?ラ??棰? 3

14. 浜?浠跺????規? 3

15. Table??浣???棰? 3

16. 瀵矽薄瀹介??璧??奸??棰? 3

? CSS 3

1. cursor:hand? ?VS? ?cursor:pointer 3

2. innerText??E涓??芥?ｅ父宸ヤ?锛?浣???ireFox涓??翠?琛?. 3

3. CSS???? 3

4. css涓???width??padding 3

5. FF??IE BOX妯″??瑙ｉ??涓?涓??村?艱?寸?稿樊2px 3

6. IE5 ??IE6??BOX瑙ｉ??涓?涓???3

7. ul??ol??琛ㄧ緝杩???棰? 3

8. ??绱?姘村鈎灞?涓???棰? 3

9. Div?????村?涓???棰? 3

10. margin????????棰? 3

11. IE涓?瀹藉害??楂?搴?????棰? 3

12. 椤甸?㈢????灏?瀹藉害 3

13. DIV娴???E????浜х??3璞＄???bug 3

14. IE??杩瘋??????棰? 3

15. float??div????;娓??ゆ誕??????搴?楂?搴?3

16. 楂?搴????搴? 3

17. IE6涓??劇??涓???绌洪??浜х?? 3

18. 瀵歸?????涓?????杈??ユ? 3

19. LI涓???瀹矽?杩??垮害??浠ョ???ュ?鋒?劇ず 3

20. 涓轟?涔?web????涓?IE??娉?璁劇疆婊??ㄦ?￠??蹭? 3

21. 涓轟?涔???娉?瀹?涔?1px宸??抽??搴???瀹瑰??3

22. ?炬??a??绛???杈規?涓????? 3

23. 瓒??炬?ヨ?塊??杩???hover?峰?灏變??虹?扮????棰? 3

24. FORM??绛?3

25. 灞??ч???╁??杩?涓?涓??界?????煎????????css??涓?涓?bug) 3

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

27. ?充?绌烘?肩??瑙ｉ??

28. ?′歡娉ㄩ??

29. 寮哄?舵覆??

30. js?煎?規??浠?

31. 娴?瑙??ㄨ????绗?

? JavaScript

1. HTML瀵矽薄?峰????棰?

FireFox锛?document.getElementById("idName");

ie:document.idname????document.getElementById("idName").

瑙ｅ?沖??娉?锛?缁?涓?浣跨??ocument.getElementById("idName");

2. const??棰?

璇存??:Firefox涓?,??浠ヤ嬌??onst?抽??瀛???var?抽??瀛??ュ??涔?甯擱??;

IE涓?,???戒嬌??ar?抽??瀛??ュ??涔?甯擱??.?

瑙ｅ?蟲?規?锛?缁?涓?浣跨??ar?抽??瀛??ュ??涔?甯擱??.

3. event.x涓?event.y??棰?

璇存??:IE涓?,event瀵矽薄??x,y灞???浣???娌℃??pageX,pageY灞???

Firefox涓?,event瀵矽薄??pageX,pageY灞???浣???娌℃??x,y灞????

瑙ｅ?蟲?規?锛?浣跨??X(mX? ?=? ?event.x? ??? ?event.x? ?:? ?event.pageX;)?ヤ唬??E涓???event.x????Firefox涓???event.pageX.?

4. window.location.href??棰?

璇存??:IE????Firefox2.0.x涓?,??浠ヤ嬌??indow.location??window.location.href;

Firefox1.5.x涓?,???戒嬌??indow.location.?

瑙ｅ?蟲?規?锛?浣跨??indow.location?ヤ唬??indow.location.href.

5. frame??棰?

浠ヤ??㈢??frame涓轟?锛?

<frame? ?src="xxx.html"? ?id="frameId"? ?name="frameName"? ?/>

(1)璁塊??frame瀵矽薄:

IE:浣跨??indow.frameId????window.frameName?ヨ?塊??杩?涓?frame瀵矽薄.? ?frameId??frameName??浠ュ??????

Firefox:???戒嬌??indow.frameName?ヨ?塊??杩?涓?frame瀵矽薄.

???锛???E??Firefox涓??藉??浠ヤ嬌??indow.document.getElementById("frameId")?ヨ?塊??杩?涓?frame瀵矽薄.

(2)????rame??瀹?

??IE??Firefox涓??藉??浠ヤ嬌??indow.document.getElementById("testFrame").src? ?=? ?"xxx.html"??window.frameName.location? ?=? ?"xxx.html"?ュ????rame????瀹?

濡?????瑕?灏?frame涓??????頒????剁????娉ㄦ??涓???opener,????parent? ?frame)锛???浠ュ??rame涓?浣跨??arent?ヨ?塊???剁???ｃ??渚?濡?锛?parent.document.form1.filename.value="Aqing";

6. 妯℃??????妯℃??绐??ｉ??棰?

璇存??:IE涓?,??浠ラ??杩?showModalDialog??showModelessDialog??寮?妯℃??????妯℃??绐???Firefox涓???涓????

瑙ｅ?蟲?規?锛??存?ヤ嬌??indow.open(pageURL,name,parameters)?瑰???寮??扮???ｃ??

濡?????瑕?灏?瀛?绐??ｄ腑?????頒??????剁??????浠ュ?ㄥ??绐??ｄ腑浣跨??indow.opener?ヨ?塊???剁?????

渚?濡?锛?var? ?parWin? ?=? ?window.opener;? ?parWin.document.getElementById("Aqing").value? ?=? ?"Aqing";?

7. firefox涓?IE???跺??绱?(parentElement)???哄??

IE锛?obj.parentElement

firefox锛?obj.parentNode

瑙ｅ?蟲?規?:? ???涓?irefox涓?IE?芥????DOM,??姝や嬌??bj.parentNode??涓???????

8. document.formName.item(??itemName??) ??棰?

??棰?璇存??锛?IE涓?锛???浠ヤ嬌??ocument.formName.item(??itemName??) ??document.formName.elements ["elementName"]锛?Firefox 涓?锛????戒嬌??ocument.formName.elements["elementName"]??

瑙ｅ?蟲?規?锛?缁?涓?浣跨??ocument.formName.elements["elementName"]??

9. ????绫誨?矽薄??棰?

??棰?璇存??锛?IE涓?锛???浠ヤ嬌??() ?? [] ?峰??????绫誨?矽薄锛?Firefox涓?锛????戒嬌??[ ]?峰??????绫誨?矽薄??

瑙ｅ?蟲?規?锛?缁?涓?浣跨??[] ?峰??????绫誨?矽薄??

10. ??瀹?涔?灞??ч??棰?

??棰?璇存??锛?IE涓?锛???浠ヤ嬌?ㄨ?峰??甯歌?灞??х???規??ヨ?峰????瀹?涔?灞??э?涔???浠ヤ嬌??etAttribute() ?峰????瀹?涔?灞??э?Firefox涓?锛????戒嬌??etAttribute() ?峰????瀹?涔?灞??с??

瑙ｅ?蟲?規?锛?缁?涓???杩?getAttribute() ?峰????瀹?涔?灞??с??

11. input.type灞??ч??棰?

??棰?璇存??锛?IE涓?input.type灞??т負??璇夥?浣???Firefox涓?input.type灞??т負璇誨????

瑙ｅ?沖??娉?锛?涓?淇???nput.type灞??с??濡???蹇?椤昏?淇??癸???浠ュ?????????ョ??input锛??跺???ㄥ???風??浣?缃??????ヤ?涓??扮??input??绱???

12. event.srcElement??棰?

??棰?璇存??锛?IE涓?锛?even瀵矽薄??srcElement灞??э?浣???娌℃??target灞??э?Firefox涓?锛?even瀵矽薄??target灞??э?浣???娌℃??srcElement灞??с??

瑙ｅ?蟲?規?锛?浣跨??rcObj = event.srcElement ?event.srcElement : event.target;

濡???????绗?8?￠??棰?锛?灏辨?圭??yEvent浠ｆ??vent?沖????

13. body杞藉?ラ??棰?

??棰?璇存??锛?Firefox??body瀵矽薄??ody??绛炬病??琚?娴?瑙??ㄥ???ㄨ?誨?ヤ???灏卞???????IE??body瀵矽薄??蹇?椤誨??ody??绛捐?娴?瑙??ㄥ???ㄨ?誨?ヤ?????瀛??ㄣ??

[娉? 杩?涓???棰?灏???瀹???楠?璇?锛?寰?楠?璇??????ヤ慨?廣??

[娉? 缁?楠?璇?锛?IE6??Opera9浠ュ??FireFox2涓?涓?瀛??ㄤ?杩伴??棰?锛???绾???JS??????浠ヨ?塊???ㄨ????涔???宸茬?杞藉?ョ??????瀵矽薄????绱?锛??充嬌杩?涓???绱?杩?娌℃??杞藉?ュ??????

14. 浜?浠跺????規?

??棰?璇存??锛?IE涓?锛?浣跨??ocument.body.onload = inject; ?朵腑function inject()?ㄨ?涔???宸茶?瀹??幫???irefox涓?锛?浣跨??ocument.body.onload = inject();

瑙ｅ?蟲?規?锛?缁?涓?浣跨??ocument.body.慰nl慰ad=new Function(??inject()??); ????document.body.onload = function(){}

[娉ㄦ??] Function??function???哄????

15. Table??浣???棰?

??棰?璇存??锛?ie??firefox浠ュ???跺??娴?瑙??ㄥ?逛? table ??绛劇????浣??藉??涓??稿??锛???e涓?涓???璁稿??able??tr??innerHTML璧??鹼?浣跨??s澧???涓?涓?tr?訛?浣跨??ppendChild?規?涔?涓?绠＄?ㄣ??

瑙ｅ?蟲?規?锛?//??table杩藉??涓?涓?绌鴻?锛?

var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className = "XXXX";row.appendChild(cell);[娉? ?變?淇哄?灏?浣跨??S?存?ユ??浣?琛ㄦ?鹼?杩?涓???棰?娌℃????瑙?杩???寤鴻??浣跨??S妗??堕???ユ??浣?table锛?濡?JQuery??

16. 瀵矽薄瀹介??璧??奸??棰?

??棰?璇存??锛?FireFox涓?绫諱技obj.style.height = imgObj.height??璇??ユ??????

? CSS

1. cursor:hand? ?VS? ?cursor:pointer

firefox涓?????hand锛?浣?ie????pointer

瑙ｅ?蟲?規?:? ?缁?涓?浣跨??ointer

17. innerText??E涓??芥?ｅ父宸ヤ?锛?浣???ireFox涓??翠?琛?.? ?

????extContent??

瑙ｅ?蟲?規?:

if(navigator.appName.indexOf("Explorer")? ?>? ?-1){

? ?? ???document.getElementById('element').innerText? ?=? ?"my? ?text";

}? ?else{

? ?? ???document.getElementById('element').textContent? ?=? ?"my? ?text";

}

18. CSS????

IE锛?filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)??

FF锛?opacity:0.6??

opacity ????锛?瀛???绱?浼?缁ф?塊????灞??с??瑙ｅ?蟲?瑰?锛?1??浣跨??background:rgba(0,0,0,.6) //IE8??浠ヤ????????? 2??浣跨?ㄥ??浣?锛??????蹭?瀛???绱?澶?浜???绾у?崇郴??

19. css涓???width??padding

??E7??FF涓?width瀹藉害涓?????padding锛???e6涓?????padding.

20. FF??IEBOX妯″??瑙ｉ??涓?涓??村?艱?寸?稿樊2px

box.style{width:100;border 1px;}?

ie??瑙ｄ負box.width = 100?

ff??瑙ｄ負box.width = 100 + 1*2 = 102??//??涓?杈規?2px?

瑙ｅ?蟲?規?锛?div{margin:30px!important;margin:28px;}

娉ㄦ??杩?涓や釜margin??椤哄?涓?瀹?涓??藉????锛? IE涓??借????!important杩?涓?灞??э?浣?????娴?瑙??ㄥ??浠ヨ????????浠ュ??E涓??跺??瑙ｉ????杩??鳳?div{maring:30px;margin:28px}

??澶?瀹?涔???璇????ф????涓?涓??ユ?ц?锛???浠ヤ???浠ュ????margin:XXpx!important;

21. IE5 ??IE6??BOX瑙ｉ??涓?涓???

IE5涓?div{width:300px;margin:0 10px 0 10px;}

div ??瀹藉害浼?琚?瑙ｉ??涓?00px-10px(?沖～??)-10px(宸?～??)锛???缁?div??瀹藉害涓?80px锛?????E6???朵?娴?瑙??ㄤ?瀹藉害????浠?300px+10px(?沖～??)+10px(宸?～??)=320px?ヨ?＄??????杩??舵??浠???浠ュ??濡?涓?淇???div{width:300px!important;width :340px;margin:0 10px 0 10px}

22. ul??ol??琛ㄧ緝杩???棰?

娑???l??ol绛???琛ㄧ??缂╄??訛??峰?搴?????锛?list-style:none;margin:0px;padding:0px;

缁?楠?璇?锛???E涓?锛?璁劇疆margin:0px??浠ュ?婚?ゅ??琛ㄧ??涓?涓?宸??崇緝杩???绌虹?戒互????琛ㄧ??鋒?????癸?璁劇疆padding瀵規?峰?娌℃??褰卞??锛???Firefox 涓?锛?璁劇疆margin:0px浠?浠???浠ュ?婚?や?涓???绌虹?斤?璁劇疆padding:0px??浠?浠???浠ュ?繪??宸??崇緝杩?锛?杩?蹇?椤昏?劇疆list- style:none???藉?婚?ゅ??琛ㄧ??鋒?????廣??涔?灏辨??璇達???E涓?浠?浠?璁劇疆margin:0px?沖??杈懼?版??缁?????锛?????irefox涓?蹇?椤誨???惰?劇疆margin:0px?? padding:0px浠ュ??list-style:none涓?椤規???借揪?版??缁???????

23. ??绱?姘村鈎灞?涓???棰?

FF: margin:0 auto;

IE: ?剁駭{ text-align:center; }

24. Div?????村?涓???棰?

vertical-align:middle; 灏?琛?璺?澧????闆???翠釜DIV涓??烽??锛?line-height:200px; ?跺?????ユ??瀛?锛?灏卞???村?涓?浜???缂虹?規??瑕??у?跺??瀹逛?瑕??㈣???

25. margin????????棰?

璁劇疆涓?loat??div??e涓?璁劇疆??margin浼???????杩???涓?涓?ie6?藉???ㄧ??bug??瑙ｅ?蟲?規????ㄨ?涓?div???㈠??涓?display:inline;?

渚?濡?锛?

?稿???css涓?

#imfloat{?

float:left;?

margin:5px;?

display:inline;}

26. 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;}

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

濡?涓?涓?涓???棰?锛?IE涓?璇???min锛?瑕?瀹??版??灏?瀹藉害锛????ㄤ??㈢???規?锛?

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

绗?涓?涓?min-width??姝ｅ父??锛?浣?绗?2琛???width浣跨?ㄤ?Javascript锛?杩?????IE??璁ゅ?锛?杩?涔?浼?璁╀???HTML??妗ｄ?澶?姝ｈ???瀹?瀹???涓???杩?Javascript???ゆ???ュ???版??灏?瀹藉害??

28. DIV娴???E????浜х??3璞＄???bug

宸?竟瀵矽薄娴?????寵竟???ㄥ?琛ヤ???宸?竟璺??ュ??浣?锛??寵竟瀵矽薄????????浼?绂誨乏杈規??3px???磋?.?

#box{ float:left; width:800px;}?

#left{ float:left; width:50%;}?

#right{ width:50%;}?

*html #left{ margin-right:-3px; //杩??ユ???抽??}?

</div>

29. IE??杩瘋??????棰?

褰?div搴??ㄥ??????跺??姣?涓???涓?????涓?浜??炬?ワ?DIV绛?杩?涓??跺??瀹規????????杩瘋??????棰???

??浜???瀹規?劇ず涓??烘?ワ?褰?榧??????╄?涓??哄???????闆??瀹圭‘瀹??ㄩ〉????

瑙ｅ?沖??娉?锛?瀵?layout浣跨??ine-height灞??ф????缁?#layout浣跨?ㄥ?哄??楂???瀹姐??椤甸?㈢???灏介??绠?????

30. float??div????;娓??ゆ誕??????搴?楂?搴?

?? 渚?濡?锛?锛?div id=??floatA??>锛?div id=??floatB??>锛?div id=??NOTfloatC??>

杩?????NOTfloatC骞朵?甯???缁х畫骞崇Щ锛?????甯???寰?涓?????(?朵腑floatA??floatB??灞??у凡缁?璁劇疆涓?loat: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>

姣?濡???浠?瑕?灏?page??????璁劇疆??????浠ヨ揪?版????涓?????????棰??叉?????茬??????,浣?????浠?浼????伴????left center right????涓???????page灞??朵?瀛?楂?搴????,??棰??ヤ?,?????ㄤ?page涓???float灞???????浠???page?變?瑕?灞?涓?,涓??借?劇疆??float,??浠ユ??浠?搴?璇ヨ??瘋В?籌?

</div>

??宓??ヤ?涓?float left??瀹藉害??100%??DIV瑙ｅ?充???

???????绉??規?锛??ㄩ???╁???锛?after锛???age涔??????ヤ?涓?绌烘??绛?骞舵??ゆ誕??

.page:after {??content: ""; display: table; clear: both; }

?ｄ???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; //灏?瀵矽薄浣?涓哄????绱?绾х??琛ㄦ?兼?劇ず}

31. 楂?搴????搴?

楂?搴????搴???褰???灞?瀵矽薄??楂?搴??????????跺?灞?楂?搴???借???ㄨ?琛?璋???锛??瑰????褰???灞?瀵矽薄浣跨??argin ??padding?躲??

渚?锛?

#box {background-color:#eee; }?

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }?

<p>p瀵矽薄涓?????瀹癸?/p>

</div>

瑙ｅ?蟲??宸э???瀵矽薄涓?涓?????2涓?绌虹??div瀵矽薄CSS浠ｇ??{height:0px;overflow:hidden;}????涓?IV??涓?border灞??с??

32. IE6涓??劇??涓???绌洪??浜х??

瑙ｅ?寵?涓?BUG????宸ф??寰?澶?,??浠ユ???瑰??html??????,????璁劇疆img涓?isplay:block????璁劇疆vertical-align灞??т負vertical-align:top/bottom/middle/text-bottom ?藉??浠ヨВ??

33. 瀵歸?????涓?????杈??ユ?

??涓?vertical-align:middle;?

<!--

input {?

width:200px;?

height:30px;?

border:1px solid red;?

vertical-align:middle;?

-->

</style>

缁?楠?璇?锛???E涓?浠諱??????戒????????ff??opera??safari??chrome??OK锛?

34. LI涓???瀹矽?杩??垮害??浠ョ???ュ?鋒?劇ず

姝ゆ??宸ч???ㄤ?IE??Opera??safari??chrom娴?瑙????FF??涓???????

<!--

li {?

width:200px;?

white-space:nowrap;?

text-overflow:ellipsis;?

-o-text-overflow:ellipsis;?

overflow: hidden;?

}

-->

</style>

35. 涓轟?涔?web????涓?IE??娉?璁劇疆婊??ㄦ?￠??蹭?

瑙ｅ?沖??娉???灏?body?㈡??html?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--?

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>

36. 涓轟?涔???娉?瀹?涔?1px宸??抽??搴???瀹瑰??

IE6涓?杩?涓???棰?????涓洪?璁ょ??琛?楂???????,瑙ｅ?崇????宸т???寰?澶?锛?

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

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

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

37. ?炬??a??绛???杈規?涓?????

a?炬?ュ??杈規????????詫???璁劇疆 display: block, ???惰?劇疆 float: left 淇?璇?涓??㈣???????enubar, 缁? a ??menubar璁劇疆楂?搴???涓轟??垮??搴?杈規?劇ず??浣?, ?ヤ?璁?height, ??浠ュ??enubar涓????ヤ?涓?绌烘?箋??

38. 瓒??炬?ヨ?塊??杩???hover?峰?灏變??虹?扮????棰?

琚??瑰?昏?塊??杩???瓒??炬?ユ?峰?涓??ㄥ?鋒??hover??active浜?,寰?澶?浜哄?璇ラ?介???拌?杩?涓???棰?,瑙ｅ?蟲??宸ф???瑰??CSS灞??х??????椤哄?: L-V-H-A?

Code:?

<!--

a:link {}?

a:visited {}?

a:hover {}?

a:active {}?

-->

</style>

39. FORM??绛?

杩?涓???绛懼??E涓?,灏?浼?????argin涓?浜?杈矽?,????F涓?margin????0,??姝?濡????蟲?劇ず涓?????浠ユ??濂藉??ss涓???瀹?margin?? padding,??瀵逛???袱涓???棰?,????css涓?涓???棣????戒嬌?ㄨ??風???峰?ul,form{margin:0;padding:0;}??

40. 灞??ч???╁??杩?涓?涓??界?????煎????????css??涓?涓?bug)

p[id]{}div[id]{}?

杩?涓?瀵逛?IE6.0??IE6.0浠ヤ????????介????,FF??OPera浣???灞??ч???╁?ㄥ??瀛????╁?ㄨ??????哄????,瀛????╁?ㄧ?????翠?褰㈠??ヨ?寸緝灏?浜?,灞??ч???╁?ㄧ?????存??杈?澶?濡?p[id]涓?,????p??绛句腑??id???芥?????峰???.

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

????娴?瑙??ㄤ腑?哄??楂?搴??肩??瀹瑰?ㄦ??涓?浼?璞?E6???ｆ?瘋???寮???,?ｆ?????沖?哄??楂?搴????寵?借???寮???瑕????瘋?劇疆?????娉?灏辨???繪??height璁劇疆min-height:200px; 杩???涓轟??ч【涓?璁よ??min-height??IE6 ??浠ヨ??峰??涔?:

height:auto!important;?

height:200px;?

min-height:200px;?

43. IE??FireFox 瀵圭┖?肩??灏哄?歌В??涓???锛?FireFox涓?px,IE涓?px; FireFox瀵?iv涓?div涔??寸??绌烘?兼??蹇界?ョ??锛?浣???IE??澶?????????姝ゅ?ㄤ袱涓??擱??iv涔??翠?瑕???绌烘?艱???杞?????????介????涓???娴?瑙??翠??存?煎?涓?姝ｇ‘锛?姣?濡???????3px??宸?锛?澶?涓?img??绛捐???锛??跺??瀹?涔?float: left;缁?????irefox???㈡?ｅ父锛???IE???㈡?劇ず??姣?涓?img?界?擱??浜?3px????????绛句??寸??绌烘?奸?藉???ら?芥病??浣??ㄣ??瑙ｅ?蟲?規?????mg澶??㈠?li锛?骞朵?瀵?i瀹?涔?margin: 0; ?垮???瑰?锛??ㄥ?瑕????跺??涓?瑕???瑙? list ??绛撅???涓??????句互?ユ????

44. ?′歡娉ㄩ??

<!--[if IE 7]>

<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

lte -- 灏?浜?绛?浜?

lt??-- 灏?浜?

gte --??澶т?绛?浜?

gt??--??澶т?

锛? --??涓?绛?浜?

45.寮哄?舵覆??

46.js?煎?規??浠?

浣?E5,IE6?煎?瑰??E7妯″?锛??ㄨ??锛?

<!??[if lt IE 7]>

<![endif]??>

浣?E5,IE6,IE7?煎?瑰??E8妯″?

<!??[if lt IE 8]>

<![endif]??>

浣?E5,IE6,IE7,IE8?煎?瑰??E9妯″?

<!??[if lt IE 9]>

<![endif]??>

47. 娴?瑙??ㄨ????绗?

p{ _color:red; }? ?? ?? ???IE6 涓???

*html p{ color:#red; }??IE6 涓???

p{ +color:red; }? ?? ?? ???IE6,7 涓???

p{ *color:red; }? ?? ?? ???IE6,7 涓???

*html p{ color:red; }? ? IE6,7 涓???

p{*+color: red;}? ?? ?? ? IE7 涓???

Body> p{ color: red; }??灞???IE6

p{ color:red\9; }? ?? ?? ? IE8? ?

Firefox: -moz-

Safari: -webkit-

Opera: -o-

IE: -ms-

前端相容性

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題