å ¼å®¹æ§é®é¢
1. HTML 对象è·åé®é¢
FireFoxï¼document.getElementById(âidNameâ);
ie:document.idname æè
document.getElementById(âidNameâ).
解å³åæ³ï¼ç»ä¸ä½¿ç¨ document.getElementById(âidNameâ);
2. const é®é¢
Firefox ä¸,å¯ä»¥ä½¿ç¨ const å
³é®åæ var å
³é®åæ¥å®ä¹å¸¸é;
IE ä¸,åªè½ä½¿ç¨ var å
³é®åæ¥å®ä¹å¸¸é.
解å³æ¹æ³ï¼ç»ä¸ä½¿ç¨ var å ³é®åæ¥å®ä¹å¸¸é.
3. event.x ä¸ event.y é®é¢
说æ:IE ä¸,event 对象æ x,y å±æ§,ä½æ¯æ²¡æ pageX,pageY å±æ§;
Firefox ä¸,event 对象æ pageX,pageY å±æ§,ä½æ¯æ²¡æ x,y å±æ§.
解å³æ¹æ³ï¼ä½¿ç¨ mX(mX = event.x ? event.x : event.pageX;)æ¥ä»£æ¿ IE ä¸ç event.x æè Firefox ä¸ç event.pageX.
4. window.location.href é®é¢
说æ:IE æè
Firefox2.0.x ä¸,å¯ä»¥ä½¿ç¨ window.location æ window.location.href;
Firefox1.5.x ä¸,åªè½ä½¿ç¨ window.location.
解å³æ¹æ³ï¼ä½¿ç¨ window.location æ¥ä»£æ¿ window.location.href.
5. frame é®é¢
以ä¸é¢ç frame 为ä¾ï¼
<frame src="xxx.html" id="frameId" name="frameName" />
(1)è®¿é® frame 对象:
IE:ä½¿ç¨ window.frameId æè
window.frameName æ¥è®¿é®è¿ä¸ª frame 对象. frameId å frameName å¯ä»¥ååã
Firefox:åªè½ä½¿ç¨ window.frameName æ¥è®¿é®è¿ä¸ª frame 对象.
å¦å¤ï¼å¨ IE å Firefox ä¸é½å¯ä»¥ä½¿ç¨ window.document.getElementById(âframeIdâ)æ¥è®¿é®è¿ä¸ª frame 对象.
(2)åæ¢ frame å
容:
å¨ IE å Firefox ä¸é½å¯ä»¥ä½¿ç¨ window.document.getElementById(âtestFrameâ).src = "xxx.html"æ window.frameName.location = "xxx.html"æ¥åæ¢ frame çå
容.
å¦æéè¦å° frame ä¸çåæ°ä¼ åç¶çªå£(注æä¸æ¯ opener,èæ¯ parent frame)ï¼å¯ä»¥å¨ frame ä¸ä½¿ç¨ parent æ¥è®¿é®ç¶çªå£ãä¾å¦ï¼parent.document.form1.filename.value=âAqingâ;
6. 模æåé模æçªå£é®é¢
说æ:IE ä¸,å¯ä»¥éè¿ showModalDialog å showModelessDialog æå¼æ¨¡æåé模æçªå£;Firefox ä¸åä¸è½.
解å³æ¹æ³ï¼ç´æ¥ä½¿ç¨ window.open(pageURL,name,parameters)æ¹å¼æå¼æ°çªå£ã
å¦æéè¦å°åçªå£ä¸çåæ°ä¼ éåç¶çªå£,å¯ä»¥å¨åçªå£ä¸ä½¿ç¨ window.opener æ¥è®¿é®ç¶çªå£.
ä¾å¦ï¼var parWin = window.opener; parWin.document.getElementById(âAqingâ).value = âAqingâ;
7. firefox ä¸ IE çç¶å ç´ (parentElement)çåºå«
IEï¼obj.parentElement
firefoxï¼obj.parentNode
解å³æ¹æ³: å 为 firefox ä¸ IE é½æ¯æ DOM,å æ¤ä½¿ç¨ obj.parentNode æ¯ä¸ééæ©.
8. document.formName.item(âitemNameâ) é®é¢
é®é¢è¯´æï¼IE ä¸ï¼å¯ä»¥ä½¿ç¨ document.formName.item(âitemNameâ) æ document.formName.elements [âelementNameâ]ï¼Firefox ä¸ï¼åªè½ä½¿ç¨ document.formName.elements[âelementNameâ]ã
解å³æ¹æ³ï¼ç»ä¸ä½¿ç¨ document.formName.elements[âelementNameâ]ã
9. éå类对象é®é¢
é®é¢è¯´æï¼IE ä¸ï¼å¯ä»¥ä½¿ç¨ () æ [] è·åéå类对象ï¼Firefox ä¸ï¼åªè½ä½¿ç¨ [ ]è·åéå类对象ã
解å³æ¹æ³ï¼ç»ä¸ä½¿ç¨ [] è·åéå类对象ã
10. èªå®ä¹å±æ§é®é¢
é®é¢è¯´æï¼IE ä¸ï¼å¯ä»¥ä½¿ç¨è·å常è§å±æ§çæ¹æ³æ¥è·åèªå®ä¹å±æ§ï¼ä¹å¯ä»¥ä½¿ç¨ getAttribute() è·åèªå®ä¹å±æ§ï¼Firefox ä¸ï¼åªè½ä½¿ç¨ getAttribute() è·åèªå®ä¹å±æ§ã
解å³æ¹æ³ï¼ç»ä¸éè¿ getAttribute() è·åèªå®ä¹å±æ§ã
11. input.type å±æ§é®é¢
é®é¢è¯´æï¼IE ä¸ input.type å±æ§ä¸ºåªè¯»ï¼ä½æ¯ Firefox ä¸ input.type å±æ§ä¸ºè¯»åã
解å³åæ³ï¼ä¸ä¿®æ¹ input.type å±æ§ãå¦æå¿ é¡»è¦ä¿®æ¹ï¼å¯ä»¥å éèåæ¥ç inputï¼ç¶åå¨åæ ·çä½ç½®åæå ¥ä¸ä¸ªæ°ç input å ç´ ã
12. event.srcElement é®é¢
é®é¢è¯´æï¼IE ä¸ï¼even 对象æ srcElement å±æ§ï¼ä½æ¯æ²¡æ target å±æ§ï¼Firefox ä¸ï¼even 对象æ target å±æ§ï¼ä½æ¯æ²¡æ srcElement å±æ§ã
解å³æ¹æ³ï¼ä½¿ç¨ srcObj = event.srcElement ?event.srcElement : event.target;
13. å ³äºé«åº¦é®é¢
é®é¢è¯´æï¼å¦ææ¯å¨æå°æ·»å å
容ï¼é«åº¦æ好ä¸è¦å®ä¹ãæµè§å¨å¯ä»¥èªå¨ä¼¸ç¼©ï¼ç¶èå¦ææ¯éæçå
容ï¼é«åº¦æ好å®å¥½ã
å¦æ设å®äºé«åº¦ï¼å
容è¿å¤æ¶ï¼ie6 ä¸ä¼èªå¨å¢å é«åº¦ãå
¶ä»æµè§å¨ä¼è¶
åºè¾¹æ¡
解å³æ¹æ³ï¼1.设置 overflow:hidden; 2.é«åº¦èªå¢ height:auto!important;height:100px;
14. äºä»¶å§ææ¹æ³
é®é¢è¯´æï¼IE ä¸ï¼ä½¿ç¨ document.body.onload = inject; å ¶ä¸ function inject()å¨è¿ä¹å已被å®ç°ï¼å¨ Firefox ä¸ï¼ä½¿ç¨ document.body.onload = inject();
解å³æ¹æ³ï¼ç»ä¸ä½¿ç¨ document.body.οnlοad=new Function(âinject()â); æè document.body.onload = function(){}
[注æ] Function å function çåºå«ã
15. document.form.item é®é¢
é®é¢è¯´æï¼
代ç ä¸åå¨ document.formName.item(âitemNameâ) è¿æ ·çè¯å¥ï¼ä¸è½å¨ FF ä¸è¿è¡
解å³æ¹æ³ï¼
æ¹ç¨ document.formName.elements[âelementNameâ]
16. cursor:hand VS cursor:pointer
é®é¢è¯´æï¼firefox ä¸æ¯æ handï¼ä½ ie æ¯æ pointer
解å³æ¹æ³: ç»ä¸ä½¿ç¨ pointer
17. innerText å¨ IE ä¸è½æ£å¸¸å·¥ä½ï¼ä½å¨ FireFox ä¸å´ä¸è¡.
解å³æ¹æ³ï¼å¨é IE æµè§å¨ä¸ä½¿ç¨ textContent ä»£æ¿ innerText
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById("element").innerText = "my text";
} else {
document.getElementById("element").textContent = "my text";
}
18. CSS éæ度ç设置
é®é¢è¯´æï¼
- æ§ç Opacity 设置
#ceng {
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
}
- å¨ Firefox, Safari, Chrome å Opera ä¸ç CSS éæ度
#ceng {
opacity: 0.7;
}
- IE ä¸ç CSS éæ度
#ceng {
filter: alpha(opacity=40);
}
#ceng {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第ä¸è¡å¨IE6, IE7åIE8ä¸ææ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
/*第äºè¡ä»
å¨IE8ä¸ææ */
}
解å³æ¹æ³ï¼
#ceng {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
19. css ä¸ç width å padding
å¨ IE7 å FF ä¸ width 宽度ä¸å æ¬ paddingï¼å¨ Ie6 ä¸å æ¬ padding.
20. FF å IE BOX 模å解éä¸ä¸è´å¯¼è´ç¸å·® 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 è¿ä¸ªå±æ§ï¼ä½å«çæµè§å¨å¯ä»¥è¯å«ãæä»¥å¨ IE ä¸å
¶å®è§£éæè¿æ ·ï¼div{maring:30px;margin:28px}
éå¤å®ä¹çè¯æç
§æåä¸ä¸ªæ¥æ§è¡ï¼æ以ä¸å¯ä»¥åªå margin:XXpx!important;
21. IE5 å IE6 ç BOX 解éä¸ä¸è´
é®é¢è¯´æï¼
IE5 ä¸ div{width:300px;margin:0 10px 0 10px;}
div ç宽度ä¼è¢«è§£é为 300px-10px(å³å¡«å
)-10px(左填å
)ï¼æç» div ç宽度为 280pxï¼èå¨ IE6 åå
¶ä»æµè§å¨ä¸å®½åº¦åæ¯ä»¥ 300px+10px(å³å¡«å
)+10px(左填å
)=320px æ¥è®¡ç®çã
解å³æ¹æ³ï¼
è¿æ¶æ们å¯ä»¥åå¦ä¸ä¿®æ¹ div{width:300px!important;width :340px;margin:0 10px 0 10px}
22. ul å ol å表缩è¿é®é¢
æ¶é¤ ulãol çå表ç缩è¿æ¶ï¼æ ·å¼åºåæï¼list-style:none;margin:0px;padding:0px;
ç»éªè¯ï¼å¨ IE ä¸ï¼è®¾ç½® margin:0px å¯ä»¥å»é¤å表çä¸ä¸å·¦å³ç¼©è¿ã空ç½ä»¥åå表ç¼å·æåç¹ï¼è®¾ç½® padding å¯¹æ ·å¼æ²¡æå½±åï¼
å¨ Firefox ä¸ï¼è®¾ç½® margin:0px ä» ä» å¯ä»¥å»é¤ä¸ä¸ç空ç½ï¼è®¾ç½® padding:0px åä» ä» å¯ä»¥å»æå·¦å³ç¼©è¿ï¼è¿å¿ 须设置 list-style:none æè½å»é¤å表ç¼å·æåç¹ã
ä¹å°±æ¯è¯´ï¼å¨ IE ä¸ä» ä» è®¾ç½® margin:0px å³å¯è¾¾å°æç»ææï¼èå¨ Firefox ä¸å¿ é¡»åæ¶è®¾ç½® margin:0pxã padding:0px 以å list-style:none ä¸é¡¹æè½è¾¾å°æç»ææã
23. å ç´ æ°´å¹³å± ä¸é®é¢
FF: margin:0 auto;
IE: ç¶çº§{ text-align:center; }
24. åéåä¸æ HTML 对象 id ç¸åçé®é¢
é®é¢è¯´æï¼
å¨ FF ä¸ï¼å 为对象 id ä¸ä½ä¸º HTML 对象çå称ï¼æ以å¯ä»¥ä½¿ç¨ä¸ HTML 对象 id ç¸åçåéåï¼IE ä¸ä¸è½
解å³æ¹æ³ï¼
å¨å£°æåéæ¶ï¼ä¸å¾å ä¸ var ï¼ä»¥é¿å
æ§ä¹ï¼è¿æ ·å¨ IE ä¸äº¦å¯æ£å¸¸è¿è¡
æ好ä¸è¦åä¸ HTML 对象 id ç¸åçåéåï¼ä»¥åå°é误
25. margin å åçé®é¢
é®é¢è¯´æï¼
设置为 float ç div å¨ ie ä¸è®¾ç½®ç margin ä¼å åãè¿æ¯ä¸ä¸ª ie6 é½åå¨ç bugã
解å³æ¹æ³ï¼
å¨è¿ä¸ª div éé¢å ä¸ display:inline;
ä¾å¦ï¼
<div id="imfloat">
ç¸åºçcss为
#imfloat{
float:left;
margin:5px;
display:inline;
}
26. IE ä¸å®½åº¦åé«åº¦çé®é¢
é®é¢è¯´æï¼
IE ä¸è®¤å¾ min-è¿ä¸ªå®ä¹ï¼ä½å®é
ä¸å®ææ£å¸¸ç width å height å½ä½æ min çæ
åµæ¥ä½¿ãè¿æ ·é®é¢å°±å¤§äºï¼å¦æåªç¨å®½åº¦åé«åº¦ï¼æ£å¸¸çæµè§å¨éè¿ä¸¤ä¸ªå¼å°±ä¸ä¼åï¼å¦æåªç¨ min-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 æµ®å¨ IE ææ¬äº§ç 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>
</div>
</div>
29. IE æè¿·èçé®é¢
é®é¢è¯´æï¼
å½ div åºç¨å¤æçæ¶åæ¯ä¸ªæ ä¸åæä¸äºé¾æ¥ï¼div çè¿ä¸ªæ¶å容æåçæè¿·èçé®é¢ã
æäºå 容æ¾ç¤ºä¸åºæ¥ï¼å½é¼ æ éæ©è¿ä¸ªåºåæ¯åç°å 容确å®å¨é¡µé¢ã
解å³åæ³ï¼å¯¹#layout ä½¿ç¨ line-height å±æ§æè ç»#layout 使ç¨åºå®é«å宽ã页é¢ç»æå°½éç®åã
30. é«åº¦ä¸éåº
é®é¢è¯´æï¼é«åº¦ä¸éåºæ¯å½å å±å¯¹è±¡çé«åº¦åçååæ¶å¤å±é«åº¦ä¸è½èªå¨è¿è¡è°èï¼ç¹å«æ¯å½å å±å¯¹è±¡ä½¿ç¨ margin æ padding æ¶ã
ä¾ï¼
#box {
}
#box p {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
<div id="box">
<p>p对象ä¸çå
容</p>
</div>
解å³åæ³ï¼å¨ p 对象ä¸ä¸åå 2 个空ç div 对象 CSS 代ç {height:0px;overflow:hidden;}æè 为 div å ä¸ border å±æ§ã
31. IE6 ç»å¯¹å®ä½çé®é¢
é®é¢è¯´æï¼
<div style="position:relative;border:1px solid orange;text-align:center;">
<div style="position:absolute;top:0;left:0;background:#CCC;">
dovapour
</div>
<a href="#" title="vapourçblog">å
容</a>
</div>
解å³åæ³ï¼
left çå®ä½é误é®é¢
1ãç»ç¶å±è®¾ç½® zoom:1 触å layoutã
2ãç»ç¶å±è®¾ç½®å®½åº¦ width
bottom çå®ä½é误é®é¢
1ãç»ç¶å±è®¾ç½® zoom:1 触å layoutã
2ãç»ç¶å±è®¾ç½®é«åº¦ height
32. IE6 ä¸å¾çä¸æ空é产ç
解å³è¿ä¸ª BUG çæå·§æå¾å¤,å¯ä»¥æ¯æ¹å html çæç,æè 设置 img 为 display:block æè 设置 vertical-align å±æ§ä¸º vertical-align:top/bottom/middle/text-bottom é½å¯ä»¥è§£å³.
33. 对é½ææ¬ä¸ææ¬è¾å ¥æ¡
å ä¸ vertical-align:middle;
<style type="text/css">
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
</style>
ç»éªè¯ï¼å¨ IE ä¸ä»»ä¸çæ¬é½ä¸éç¨ï¼è ffãoperaãsafariãchrome å OKï¼
34. LI ä¸å å®¹è¶ è¿é¿åº¦å以çç¥å·æ¾ç¤º
æ¤æå·§éç¨ä¸ IEãOperaãsafariãchrom æµè§å¨ï¼FF æä¸æ¯æã
<style type="text/css">
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
</style>
35. æè·äºä»¶
é®é¢è¯´æï¼
FF 没æ setCapture()ãreleaseCapture()æ¹æ³
解å³æ¹æ³ï¼
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
} else {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
} else {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
36. IE6 é»è®¤ç div é«åº¦
é®é¢è¯´æï¼
ie6 é»è®¤ div é«åº¦ä¸ºä¸ä¸ªåä½æ¾ç¤ºçé«åº¦ï¼æå¨ ie6 ä¸ div çé«åº¦å¤§äºçäºä¸ä¸ªåçé«åº¦ï¼å æ¤å¨ ie6 ä¸å®ä¹é«åº¦ä¸º 1px ç容å¨ï¼æ¾ç¤ºçæ¯ä¸ä¸ªåä½çé«åº¦
解å³æ¹æ³ï¼ä¸ºè¿ä¸ªå®¹å¨è®¾ç½®ä¸åå±æ§ä¹ä¸
1ã设置 overflow:hidden;
2ã设置 line-height:1px;
3ã设置 zoom:0.08
37. ç¦æ¢éåç½é¡µå 容
é®é¢è¯´æï¼
FF éè¦ç¨ CSS ç¦æ¢ï¼IE ç¨ JS ç¦æ¢
解å³æ¹æ³ï¼
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
38. css 滤éçé®é¢
é®é¢è¯´æï¼
css 滤éåªå¨ ie ä¸ææï¼Firefox, Safari(WebKit), Opera åªè½å¤è®¾ç½®éæï¼å®ä»¬ä¸æ¯æ滤é filterï¼æ æ³å®ç°å¾çåæ¢ä¸é´åæ¢çææï¼åªè½éè¿éæ度æ¥è®¾ç½®ã
解å³æ¹æ³ï¼
ff ä¸è®¾ç½®éæ度 -moz-opacity:0.10; opacity:0.6;
ie ä¸åªè®¾ç½® filter:alpha(opacity=50);æ¶ï¼ie6-7 失æï¼è¿è¦è®¾ç½®
1ãzoom:1; 2ãwidth:100%;
39. td é«åº¦çé®é¢
é®é¢è¯´æï¼
table ä¸ td ç宽度é½ä¸å
å« border ç宽度ï¼ä½æ¯ oprea å ff ä¸ td çé«åº¦å
å«äº border çé«åº¦
解å³æ¹æ³ï¼
设置 line-height å height ä¸æ ·ãå¨ ie ä¸å¦æ td ä¸ç没æå
容ï¼é£ä¹ border å°ä¸ä¼æ¾ç¤º
40. div åµå¥ p æ¶ï¼åºç°ç©ºç½è¡
é®é¢è¯´æï¼
div ä¸æ¾ç¤º
ææ¬
ï¼ffãopreaãChromeï¼top å bottom é½ä¼åºç°ç©ºç½è¡ï¼ä½æ¯å¨ ie ä¸ä¸ä¼åºç°ç©ºç½è¡ã解å³æ¹æ³ï¼
设置 p ç margin:0pxï¼å设置 div ç padding-top å padding-bottom
41. IE6-7 å¾çä¸é¢æ空éçé®é¢
é®é¢è¯´æï¼
åå
ç´ ä¸å«æå¾çæ¶ï¼ie6-7 ä¸ä¼åºç°å¾çä¸æ空é
解å³æ¹æ³ï¼
1ãå¨æºä»£ç ä¸è®©<div>
å<img>
å¨åä¸è¡
2ãå°å¾ç转æ¢ä¸ºå级对象 display:block;
3ã设置å¾ççåç´å¯¹é½æ¹å¼ vertical-align:top/middle/bottom
4ãæ¹åç¶å¯¹è±¡çå±æ§ï¼å¦æç¶å¯¹è±¡ç宽ãé«åºå®ï¼å¾ç大å°éç¶å¯¹è±¡èå®ï¼é£ä¹å¯ä»¥å¯¹ç¶å
ç´ è®¾ç½®ï¼ overflow:hidden;
5ã设置å¾ççæµ®å¨å±æ§ float:left;
42. IE6 ååè¾¹è·çé®é¢
é®é¢è¯´æï¼
ie6 ä¸è®¾ç½®æµ®å¨ï¼åæ¶å设置 margin æ¶ï¼ä¼åºç°ååè¾¹è·çé®é¢
ä¾ float:left;width:100px;margin:0 100px;
解å³æ¹æ³ï¼
设置 display:inline;
43. IE6 width 为å¥æ°ï¼å³è¾¹å¤åº 1px çé®é¢
é®é¢è¯´æï¼
ç¶çº§å
ç´ éç¨ç¸å¯¹å®ä½ï¼ä¸å®½åº¦è®¾ç½®ä¸ºå¥æ°æ¶ï¼åå
ç´ éç¨ç»å¯¹å®ä½ï¼å¨ ie6 ä¸ä¼åºç°å³ä¾§å¤åº 1 åç´
解å³æ¹æ³ï¼
å°å®½åº¦çå¥æ°å¼æ¹æå¶æ°
44. IE6 两个å±ä¹é´ 3px çé®é¢
é®é¢è¯´æï¼
左边å±éç¨æµ®å¨ï¼å³è¾¹æ²¡æéç¨æµ®å¨ï¼è¿æ¶å¨ ie6 ä¸ä¸¤å±ä¹é´å°±ä¼äº§ç 3 åç´ çé´è·
解å³æ¹æ³ï¼
1ãå³è¾¹å±ä¹éç¨æµ®å¨ float
2ã左边å±æ·»å å±æ§ margin-right:-3px;
45. IE6 åå ç´ ç»å¯¹å®ä½çé®é¢
é®é¢è¯´æï¼
ç¶çº§å
ç´ ä½¿ç¨ padding åï¼åå
ç´ ä½¿ç¨ç»å¯¹å®ä½ï¼ä¸è½ç²¾ç¡®å®ä½
解å³æ¹æ³ï¼
å¨åå
ç´ ä¸è®¾ç½® left:-20px; top:-1px;
46. æ¾ç¤ºæå cursor:hand
é®é¢è¯´æï¼
ie6/7/8ãopera é½æ¯æ
ä½æ¯ safari ã ff ä¸æ¯æ
解å³æ¹æ³ï¼
åæ cursor:pointer; (æææµè§å¨é½è½è¯å«)
47. IE6-7 line-height 失æçé®é¢
é®é¢è¯´æï¼
å¨ ie ä¸ img ä¸æåæ¾ä¸èµ·æ¶ï¼ line-height ä¸èµ·ä½ç¨
解å³æ¹æ³ï¼
é½è®¾ç½®æ float
48. td èªå¨æ¢è¡çé®é¢
é®é¢è¯´æï¼
Table 宽度åºå®ï¼td èªå¨æ¢è¡
解å³æ¹æ³ï¼
设置 Table ç table-layout:fixedï¼td ç word-wrap:break-word
49. å容å¨æµ®å¨åï¼ç¶å®¹å¨æ©å±é®é¢
é®é¢è¯´æï¼
å容å¨é½ float 以åï¼ç¶å®¹å¨æ²¡æ设å®é«åº¦,ç¶å®¹å¨å°ä¸ä¼æ©å±
解å³æ¹æ³ï¼
åªéè¦æ·»å ä¸ä¸ª clear:both ç divï¼ä»£ç å¦ä¸ï¼
<div style="border:1px solid#333;width:204px">
<divstyle="width:100px;border:1px solid #333; float:left; ">å容å¨a</div>
<divstyle="width:100px;border:1px solid #333; float:left;">å容å¨b</div>
<divstyle="clear:both"></div>
</div>
50. éæ png å¾çä¼å¸¦èæ¯è²
é®é¢è¯´æï¼
å¨ ie6 ä¸éæç png å¾çä¼å¸¦ä¸ä¸ªèæ¯è²
解å³æ¹æ³ï¼
background-image: url(icon_home.png);
background-repeat: no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');
background-image: none;
51. list-style-position é»è®¤å¼çé®é¢
é®é¢è¯´æï¼
ie ä¸ list-style-position é»è®¤ä¸º inside, firefox é»è®¤ä¸º outside
解å³æ¹æ³ï¼
css ä¸æå®ä¸º outside å³å¯è§£å³å
¼å®¹æ§é®é¢
52. list-style-image åç¡®å®ä½çé®é¢
é®é¢è¯´æï¼
li å设置å¾çæ¶ï¼å¾çä¸å
¶åçæå对é½é®é¢
解å³æ¹æ³ï¼
1ãéç¨èæ¯å®ä½ å å符缩è¿çæ¹æ³
background:url() no-repeat left center;
text-index:16px;
2ãéç¨ç¸å¯¹å®ä½æ¹æ³
li 设置 list-style:url();
li çåå
ç´ position:relative;top:-5px;
53. ul æ ç¾é»è®¤å¼çé®é¢
é®é¢è¯´æï¼
ul æ ç¾å¨ ff ä¸é»è®¤æ¯æ padding å¼ç,èå¨ ie ä¸åªæ margin æå¼
解å³æ¹æ³ï¼
å®ä¹ ul{margin:0;padding:0;}å°±è½è§£å³å¤§é¨åé®é¢
54. IE ä¸ li æå®é«åº¦åï¼åºç°æçé误
é®é¢è¯´æï¼
å¨ ie ä¸å¦æ为 li æå®é«åº¦å¯è½ä¼åºç°æçéä½
解å³æ¹æ³ï¼
设置 line-height
55. ul æ li æµ®å¨åï¼æ¾ç¤ºå¨ div å¤
é®é¢è¯´æï¼
div ä¸ç ul æ li 设置 float 以åï¼é½ä¸å¨ div ä¸
解å³æ¹æ³ï¼
å¿
é¡»å¨ ul æ ç¾åå <div style="clear:both"></div>
æ¥éåå¤å± div
56. ul æµ®å¨åï¼margin å大
é®é¢è¯´æï¼
ul 设置 float åï¼å¨ ie ä¸ margin å°å大
解å³æ¹æ³ï¼
设置 ul ç display:inline
ï¼li ç list-style-position:outside
57. li æµ®å¨åï¼margin å大
é®é¢è¯´æï¼
li 设置 float åï¼å¨ ie ä¸ margin å°å大
解å³æ¹æ³ï¼
设置 li ç display:inline
58. åµå¥ä½¿ç¨ ulãli çé®é¢
é®é¢è¯´æï¼
ie ç bugï¼åµå¥ä½¿ç¨ ulãli æ¶ï¼éå±ç li 设置 float 以åï¼å¤å± li ä¸è®¾ç½® float, éé¢ç ul 顶é¨åå®å¤é¢ç li æ»æ¯æä¸æ®µé´è·
解å³æ¹æ³ï¼
设置éé¢ç ul ç zoom:1
59. IE6-7 li åºé¨æ 3px çé®é¢
é®é¢è¯´æï¼
è¿ä¸ª bug 产ççå
è¦æ¡ä»¶æ¯ li çåå
ç´ æµ®å¨å¹¶ä¸ li 设置äºä»¥ä¸ CSS å±æ§ä¹ä¸ï¼widthãheightãzoomãpadding-topãpadding-bottomãmargin-topãmargin-bottomã
解å³æ¹æ³ï¼
1ãdiv 设置 clear:left|bothï¼è¿æ¶ li ä¸è½è®¾ç½® widthãheightãzoomã
2ãli 设置 float:leftï¼è¿æ¶ li å¯ä»¥è®¾ç½® widthãheightãzoomã
3ãli 设置 clear:left|bothï¼è¿æ¶ li ä¸è½è®¾ç½® widthãheightãzoomã
4ãIE6/IE7 çè¿ä¸ª Bug å¯ä»¥éè¿ç» li ä¸ç div 设置 vertical-align:top|middle|bottom 解å³ã
60. IE6 åç´å表é´éçé®é¢
é®é¢è¯´æï¼
li ä¸æ a ä¸è®¾ç½® display:block æ¶ï¼ie6 ä¸å表é´ä¼åºç°ç©ºé
解å³æ¹æ³ï¼
1ãli ä¸å display:inline;
2ãli ä½¿ç¨ float ç¶å clear:both;
3ãç»å
å«çææ¬æ«å°¾æ·»å ä¸ä¸ªç©ºæ ¼
4ã设置 width
61. IE6 å表èæ¯é¢è²å¤±æçé®é¢
é®é¢è¯´æï¼
å½ç¶å
ç´ è®¾ç½® position:relative;æ¶ï¼å¨ ie6 ä¸ç¬¬ä¸ä¸ª ulãolãdl çèæ¯é¢è²å¤±æ
解å³æ¹æ³ï¼
ulãolãdl é½è®¾ç½®ä¸º position:relative;
62. IE6-7 å表èæ¯é¢è²å¤±æçé®é¢
é®é¢è¯´æï¼
å横å导èªæ æ¶ï¼ul 设置为 float ä¸æèæ¯è²ï¼li 设置为 floatãie6-7 èæ¯é¢è²å¤±æ
解å³æ¹æ³ï¼
å¾å¤ ie ç bug é½å¯ä»¥éè¿è§¦å layout æ¥è§£å³ ul æ·»å å±æ§
1ãheight:1%;
2ãfloat:left;
3ãzoom:1;
63. å表ä¸è½æ¢è¡çé®é¢
é®é¢è¯´æï¼
li 设置为浮å¨ï¼åé¢ç li ç´§éå
¶åï¼ä¸è½æ¢è¡
解å³æ¹æ³ï¼
1ã为è¿ä¸ª ul å®ä¹åéç宽é«
2ãç»å
å«è¿ä¸ª ul çç¶ div å®ä¹åéç宽é«ã
64. li ä¸çå 容以çç¥å·æ¾ç¤º
é®é¢è¯´æï¼
li ä¸å
容è¶
è¿é¿åº¦æ¶ï¼æ³ä»¥çç¥å·æ¾ç¤ºï¼ æ¤æ¹æ³éç¨äº ie6-7-8ãoperaãsafari æµè§å¨ãff æµè§å¨ä¸æ¯æ
解å³æ¹æ³ï¼
li {
width: 200px;
white - space: nowrap;
text - overflow: ellipsis; - o - text - overflow: ellipsis;
overflow: hidden;
}
65. è¶ é¾æ¥è®¿é®è¿å hover æ ·å¼ä¸åºç°çé®é¢
é®é¢è¯´æï¼
ç¹å»è¶
é¾æ¥åï¼hoverãactive æ ·å¼æ²¡æææ
解å³æ¹æ³ï¼
æ¹å CSS å±æ§çæå顺åº: L-V-H-A
66. ç¦ç¨ä¸æè¾å ¥æ³çé®é¢
é®é¢è¯´æï¼
ä¸è½å¨è¾å
¥æ¡ä¸è¾å
¥æ±å
解å³æ¹æ³ï¼
åªå¨ ie ç³»åå ff ä¸ææime-mode:disabled
(ä½å¯ä»¥ç²è´´)
ç¦ç¨ç²è´´ï¼onpaste="return false"
67. é¤å»æ»å¨æ¡çé®é¢
é®é¢è¯´æï¼
éèæ»å¨æ¡
解å³æ¹æ³ï¼
1ãåªæ ie6-7 æ¯æ<body scroll="no">
2ãé¤ ie6-7 ä¸æ¯æ body{overflow:hidden}
3ãæææµè§å¨ html{overflow:hidden}
68. 让å±æ¾ç¤ºå¨ FLASH ä¹ä¸
é®é¢è¯´æï¼
æ³è®©å±çå
容æ¾ç¤ºå¨ flash ä¸
解å³æ¹æ³ï¼
æ FLASH 设置éæ
1ã<param name=" wmode " value="transparent" />
2ã<param name="wmode" value="opaque"/>
69. å»é¤é¾æ¥è线边æ¡çé®é¢
é®é¢è¯´æï¼
å½ç¹å»è¶
é¾æ¥åï¼ie6/7/8 ff ä¼åºç°èçº¿è¾¹æ¡ ,è operaãsafari 没æè线边æ¡
解å³æ¹æ³ï¼
ie6/7 ä¸ è®¾ç½®ä¸º a {blr:expression_r(this.onFocus=this.blur()) }
ie8 å ff é½ä¸æ¯æ expression å¨ ie8 ãff ä¸è®¾ç½®ä¸º :focus { outline: none; }
70. IE6 èæ¯éªççé®é¢
é®é¢è¯´æï¼
é¾æ¥ãæé®ç¨ CSS sprites ä½ä¸ºèæ¯ï¼å¨ ie6 ä¸ä¼æèæ¯å¾éªççç°è±¡ãåå æ¯:IE6 没æå°èæ¯å¾ç¼åï¼æ¯æ¬¡è§¦å hover çæ¶åé½ä¼éæ°å è½½
解å³æ¹æ³ï¼
å¯ä»¥ç¨ JavaScript 设置 ie6 ç¼åè¿äºå¾çï¼
document.execCommand(âBackgroundImageCacheâ,false,true);
71. åºç°éå¤æåçé®é¢
é®é¢è¯´æï¼
<div style="width:400px">
<div style="float:left"></div>
<!â _ â>
<div style="float:right;width:400px">âè¿å°±æ¯å¤åºæ¥çé£åªçª</div>
</div>
解å³æ¹æ³ï¼
1ãæ¹åç»æï¼ä¸åºç°ãä¸ä¸ªå®¹å¨å
å«2两个å
·æâfloat"æ ·å¼çå容å¨ãçç»æã
2ãåå°ç¬¬äºä¸ªå®¹å¨ç宽度ï¼ä½¿ç¶å®¹å¨å®½åº¦åå»ç¬¬äºä¸ªå®¹å¨å®½åº¦çå¼å¤§äº3
3ãå»æææç注éã
4ãä¿®æ£æ³¨éçåæ³ã
5ãå¨ç¬¬äºä¸ªå®¹å¨åé¢å ä¸ä¸ªæè
å¤ä¸ª<divstyle=âclearâ>æ¥è§£å³ã
72. ffãchrome ç»å¯¹å®ä½æ æ
é®é¢è¯´æï¼
å¨ IE ç» td 设置 position:relativeï¼ç¶åç»å®å
å«çä¸ä¸ªå®¹å¨ä½¿ç¨ position:absolute è¿è¡å®ä½æ¯ææçï¼ä½å¨ FF å Chrome ä¸å´ä¸å¯ä»¥ã
解å³æ¹æ³ï¼
设置 td ç display:blockã
73. å容å¨å®½åº¦å¤§äºç¶å®¹å¨å®½åº¦æ¶ï¼å å®¹è¶ åº
é®é¢è¯´æï¼
å DIV ç宽度åç¶ DIV ç宽度é½å·²ç»å®ä¹ï¼å¨ IE6 ä¸å¦æå
¶å DIV ç宽度大äºç¶ DIV ç宽度ï¼ç¶ DIV ç宽度å°ä¼è¢«æ©å±ï¼å¨å
¶ä»æµè§å¨ä¸ç¶ DIV ç宽度å°ä¸ä¼æ©å±ï¼å DIV å°è¶
åºç¶ DIV
解å³æ¹æ³ï¼
设置 overflow:hiddenï¼å DIV å°ä¸ä¼è¶
åºç¶ DIVã
74. float ç div éåçé®é¢
é®é¢è¯´æï¼
ä¾å¦ï¼<div id="floatA" ><div id="floatB" ><div id="NOTfloatC" >è¿éç NOTfloatC 并ä¸å¸æ继ç»å¹³ç§»ï¼èæ¯å¸æå¾ä¸æã(å
¶ä¸ floatAãfloatB çå±æ§å·²ç»è®¾ç½®ä¸º float:left;)
è¿æ®µä»£ç å¨ IE ä¸æ¯«æ é®é¢ï¼é®é¢åºå¨å
¶ä»æµè§å¨ä¸ãåå æ¯ NOTfloatC 并é float æ ç¾ï¼å¿
é¡»å° float æ ç¾éåã
解å³æ¹æ³ï¼
å¨ <#div class="floatB"> <#div class="NOTfloatC">ä¹é´å ä¸ <#div class="clear">è¿ä¸ª div ä¸å®è¦æ³¨æä½ç½®ï¼èä¸å¿
é¡»ä¸ä¸¤ä¸ªå
·æ float å±æ§ç div å级ï¼ä¹é´ä¸è½åå¨åµå¥å
³ç³»ï¼å¦åä¼äº§çå¼å¸¸ã并ä¸å° clear è¿ç§æ ·å¼å®ä¹ä¸ºä¸ºå¦ä¸å³å¯ï¼.clear{ clear:both;}
75. åéæ¡ãå¤éæ¡ä¸åé¢çæå对ä¸é½
é®é¢è¯´æï¼
åéæ¡ãå¤éæ¡ä¸åé¢çæå对ä¸é½ã
解å³æ¹æ³ï¼
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left;padding-top:3px; padding-top:5px;}
é注æçé®é¢è¯´æï¼
- 设置 padding åé«åº¦å宽带é½ä¼å¢å
说æï¼
é¤äº ie5.5ï¼å ¶ä»æææµè§å¨ä¸ï¼è®¾ç½® padding 以åé«åº¦å宽带é½ä¼å¢å - ä½¿ç¨ XHTML 1.0Transitional åï¼div 宽度
说æï¼
å¨ä½¿ç¨ XHTML 1.0Transitional 以å div 宽度é½ä¸å å« border ç宽度äºï¼è®¾ç½®å®½åº¦çæ¶åéè¦æ³¨æä¸ã - å¤å±ç¸å¯¹å®ä½ï¼å
å±ç»å¯¹å®ä½
说æï¼
ie6 ä¸ï¼å¤å± div ç postion:relativeï¼å¹¶è®¾ç½® text-alignï¼å å± div ç postion: absoluteï¼è¿æ¶å å±çä½ç½®æ¯ç¸å¯¹äº text-align èè¨ç
ä¾å¦ï¼
<div style="position:relative;border:1px solid orange;text-align:center;zoom:1">
position:relative
<div style="position:absolute;top:0;left:0;background:#CCC;">
position:absolute
</div>
</div>
39. FORM æ ç¾
è¿ä¸ªæ ç¾å¨ IE ä¸,å°ä¼èªå¨ margin ä¸äºè¾¹è·,èå¨ FF ä¸ margin åæ¯ 0,å æ¤,å¦ææ³æ¾ç¤ºä¸è´,æ以æå¥½å¨ css ä¸æå® 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 ä¸ææ¬æ æ³æå¼å®¹å¨çé«åº¦
æ åæµè§å¨ä¸åºå®é«åº¦å¼ç容å¨æ¯ä¸ä¼è±¡ IE6 éé£æ ·è¢«æå¼ç,é£æåæ³åºå®é«åº¦,åæ³è½è¢«æå¼éè¦ææ ·è®¾ç½®å¢ï¼åæ³å°±æ¯å»æ height 设置 min-height:200px; è¿é为äºç §é¡¾ä¸è®¤è¯ min-height ç IE6 å¯ä»¥è¿æ ·å®ä¹:
{
height:auto!important;
height:200px;
min-height:200px;
}
43. IE å FireFox å¯¹ç©ºæ ¼ç尺寸解éä¸åï¼FireFox 为 4px,IE 为 8px;
FireFox 对 div ä¸ div ä¹é´çç©ºæ ¼æ¯å¿½ç¥çï¼ä½æ¯ IE æ¯å¤ççãå æ¤å¨ä¸¤ä¸ªç¸é» div ä¹é´ä¸è¦æç©ºæ ¼è·å车ï¼å¦åå¯è½é æä¸åæµè§é´ä¹é´æ ¼å¼ä¸æ£ç¡®ï¼æ¯å¦èåç 3px åå·®ï¼å¤ä¸ª img æ ç¾è¿çï¼ç¶åå®ä¹ float: left;ç»æå¨ firefox éé¢æ£å¸¸ï¼è IE éé¢æ¾ç¤ºçæ¯ä¸ª img é½ç¸éäº 3pxãæææ ç¾ä¹é´çç©ºæ ¼é½å é¤é½æ²¡æä½ç¨ã解å³æ¹æ³æ¯å¨ img å¤é¢å¥ liï¼å¹¶ä¸å¯¹ li å®ä¹ margin: 0; é¿å æ¹å¼ï¼å¨å¿ è¦çæ¶åä¸è¦æ è§ list æ ç¾ï¼èä¸åå é¾ä»¥æ¥æã
44. æ¡ä»¶æ³¨é
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
lte -- å°äºçäº
lt -- å°äº
gte -- 大äºçäº
gt -- 大äº
ï¼ -- ä¸çäº
45.强å¶æ¸²æ
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> //è¿å¥è¯çæææ¯å¼ºå¶ä½¿ç¨IE7模å¼æ¥è§£æç½é¡µä»£ç ï¼
<meta http-equiv=âX-UA-Compatible" content=âIE=8â³>
<meta http-equiv=âX-UA-Compatible" content=âchrome=1â³ /> //Google Chrome Frameä¹å¯ä»¥è®©IEç¨ä¸Chromeçå¼æ
<meta http-equiv=âX-UA-Compatible" content=âIE=EmulateIE7â³><!â IE7 mode â> æè
<meta http-equiv=âX-UA-Compatible" content=âIE=7â³><!â IE7 mode â> //强å¶IE8使ç¨IE7模å¼æ¥è§£æ
<meta http-equiv=âX-UA-Compatible" content=âIE=6â³><!â IE6 mode â> <meta http-equiv=âX-UA-Compatible" content=âIE=5â³><!â IE5 mode â> //强å¶IE8使ç¨IE6æIE5模å¼æ¥è§£æ
<meta http-equiv=âX-UA-Compatible" content=âIE=5; IE=8â³ /> //ä¸ä¸ªç¹å®çæ¬çIEæ¯ææè¦æ±çå
¼å®¹æ§æ¨¡å¼å¤äºä¸ç§
46.js å ¼å®¹æ件
使IE5,IE6å
¼å®¹å°IE7模å¼ï¼æ¨èï¼
<!â[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]â>
使IE5,IE6,IE7å
¼å®¹å°IE8模å¼
<!â[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]â>
使IE5,IE6,IE7,IE8å
¼å®¹å°IE9模å¼
<!â[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![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-
48. æ·»å å°ä¸»å±åçæ é¢ï¼IOSï¼
<meta name="apple-mobile-web-app-title" content="æ é¢" />
49. å¯ç¨ WebApp
å
¨å±æ¨¡å¼ï¼IOSï¼
å½ç½ç«æ·»å å°ä¸»å±å¹ååç¹å»è¿è¡å¯å¨æ¶ï¼å¯éèå°åæ ï¼ä»æµè§å¨è·³è½¬æè¾å
¥é¾æ¥è¿å
¥å¹¶æ²¡ææ¤ææï¼
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
50. ç¾åº¦ç¦æ¢è½¬ç
éè¿ç¾åº¦ææºæå¼ç½é¡µæ¶ï¼ç¾åº¦å¯è½ä¼å¯¹ä½ çç½é¡µè¿è¡è½¬ç ï¼å¾ä½ 页é¢è´´ä¸å®ç广åï¼é常ä¹æ¶å¿ãä¸è¿æ们å¯ä»¥éè¿è¿ä¸ªmetaæ ç¾æ¥ç¦æ¢å®ï¼
<meta http-equiv="Cache-Control" content="no-siteapp" />
ç¾åº¦SiteApp转ç 声æï¼http://t.cn/R28wSBl
51. 设置ç¶ææ çèæ¯é¢è²ï¼IOSï¼
设置ç¶ææ çèæ¯é¢è²ï¼åªæå¨"apple-mobile-web-app-capable" content="yes"æ¶çæ
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content åæ°ï¼
· default ï¼ç¶ææ èæ¯æ¯ç½è²ã
· black ï¼ç¶ææ èæ¯æ¯é»è²ã
· black-translucent ï¼ç¶ææ èæ¯æ¯åéæã å¦æ设置为 default æ black ,ç½é¡µå
容ä»ç¶ææ åºé¨å¼å§ã
å¦æ设置为 black-translucent ,ç½é¡µå
容å
满æ´ä¸ªå±å¹ï¼é¡¶é¨ä¼è¢«ç¶ææ é®æ¡ã
52.移å¨ç«¯ææºå·ç è¯å«ï¼IOSï¼
å¨ iOS Safari ï¼å
¶ä»æµè§å¨åAndroidåä¸ä¼ï¼ä¸ä¼å¯¹é£äºçèµ·æ¥åæ¯çµè¯å·ç çæ°åå¤ç为çµè¯é¾æ¥ï¼æ¯å¦ï¼
· 7ä½æ°åï¼å½¢å¦ï¼1234567
· 带æ¬å·åå å·çæ°åï¼å½¢å¦ï¼(+86)123456789
· åè¿æ¥çº¿çæ°åï¼å½¢å¦ï¼00-00-00111
· 11ä½æ°åï¼å½¢å¦ï¼13800138000
å¯è½è¿æå
¶ä»ç±»åçæ°åä¹ä¼è¢«è¯å«ãæ们å¯ä»¥éè¿å¦ä¸çmetaæ¥å
³éçµè¯å·ç çèªå¨è¯å«ï¼
<meta name="format-detection" content="telephone=no" />
å¼å¯çµè¯åè½
<a href="tel:123456">123456</a>
å¼å¯çä¿¡åè½ï¼
<a href="sms:123456">123456</a>
53. 移å¨ç«¯é®ç®±è¯å«ï¼Androidï¼
ä¸çµè¯å·ç çè¯å«ä¸æ ·ï¼å¨å®åä¸ä¼å¯¹ç¬¦åé®ç®±æ ¼å¼çå符串è¿è¡è¯å«ï¼æ们å¯ä»¥éè¿å¦ä¸çmetaæ¥ç®¡å«é®ç®±çèªå¨è¯å«ï¼
<meta content="email=no" name="format-detection" />
åæ ·å°ï¼æ们ä¹å¯ä»¥éè¿æ ç¾å±æ§æ¥å¼å¯é¿æé®ç®±å°åå¼¹åºé®ä»¶åéçåè½ï¼
<a mailto:[email protected]">[email protected]</a>
54. æ·»å æºè½ App
广åæ¡ Smart App Bannerï¼IOS 6+ Safariï¼
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
55. IOS Web app å¯å¨å¨ç»
ç±äºiPad çå¯å¨ç»é¢æ¯ä¸å
æ¬ç¶ææ åºåçãæ以å¯å¨å¾çéè¦åå»ç¶ææ åºåæ对åºçæ¹åä¸ç20px大å°ï¼ç¸åºå°å¨retina设å¤ä¸è¦åå»40pxç大å°ã
<link href="apple-touch-startup-image-320×460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-640×960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768×1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748×1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536×2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-2048×1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
ï¼landscapeï¼æ¨ªå± | portraitï¼ç«å±ï¼
56. æ·»å å°ä¸»å±åç APP å¾æ
æå®web appæ·»å å°ä¸»å±åçå¾æ è·¯å¾ï¼æ两ç§ç¥å¾®ä¸åçæ¹å¼ï¼
<!â 设计åå¾ â>
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!â æ·»å é«å
ææ â>
<link href="short_cut_114x114.png" rel="apple-touch-icon">
· apple-touch-iconï¼å¨IOS6å以ä¸ççæ¬ä¼èªå¨ä¸ºå¾æ æ·»å ä¸å±é«å
ææï¼IOS7å¼å§å·²ä½¿ç¨æå¹³åç设计é£æ ¼ï¼
· apple-touch-icon-precomposedï¼ä½¿ç¨â设计åå¾å¾æ "
ææï¼
å¾æ 尺寸ï¼
å¯éè¿æå®sizeå±æ§æ¥ä¸ºä¸åç设å¤æä¾ä¸åçå¾æ ï¼ä½é常æ¥è¯´ï¼æ们åªéæä¾ä¸ä¸ª114 x 114 pixels大å°çå¾æ å³å¯ ï¼
å®æ¹è¯´æå¦ä¸ï¼
Create different sizes of your app icon for different devices. If you're creating a universal app, you need to supply app
icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
57. ä¼å 使ç¨ææ°çæ¬ IE å Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
58.viewport 模æ¿
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>æ é¢</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
è¿éå¼å§å
容
</body>
</html>
59.移å¨ç«¯å¦ä½å®ä¹åä½ font-family
ä¸å¤§ææºç³»ç»çåä½ï¼
iOS ç³»ç»
· é»è®¤ä¸æåä½æ¯Heiti SC
· é»è®¤è±æåä½æ¯Helvetica
· é»è®¤æ°ååä½æ¯HelveticaNeue
· æ 微软é
é»åä½
Android ç³»ç»
· é»è®¤ä¸æåä½æ¯Droidsansfallback
· é»è®¤è±æåæ°ååä½æ¯Droid Sans
· æ 微软é
é»åä½
Winphone ç³»ç»
· é»è®¤ä¸æåä½æ¯Dengxian(æ¹æ£ç线ä½)
· é»è®¤è±æåæ°ååä½æ¯Segoe
· æ 微软é
é»åä½
å个ææºç³»ç»æèªå·±çé»è®¤åä½ï¼ä¸é½ä¸æ¯æ微软é
é»ï¼å¦æ ç¹æ®éæ±ï¼ææºç«¯æ éå®ä¹ä¸æåä½ï¼ä½¿ç¨ç³»ç»é»è®¤è±æåä½åæ°ååä½å¯ä½¿ç¨ Helvetica ï¼ä¸ç§ç³»ç»é½æ¯æã
* 移å¨ç«¯å®ä¹åä½ç代ç */
body{font-family:Helvetica;}
60.移å¨ç«¯åä½åä½ font-size éæ© px è¿æ¯ rem
· 对äºåªéè¦éé
ææºè®¾å¤ï¼ä½¿ç¨pxå³å¯
· 对äºéè¦éé
åç§ç§»å¨è®¾å¤ï¼ä½¿ç¨remï¼ä¾å¦åªéè¦éé
iPhoneåiPadçå辨çå·®å«æ¯è¾æºå¤§ç设å¤
remé
ç½®åèï¼
html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
html {
font-size: 15px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
html {
font-size: 20px
}
}
@media screen and (min-width:720px) and (max-width:749px) {
html {
font-size: 22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px) {
html {
font-size: 23.5px
}
}
@media screen and (min-width:800px) and (max-width:959px) {
html {
font-size: 25px
}
}
@media screen and (min-width:960px) and (max-width:1079px) {
html {
font-size: 30px
}
}
@media screen and (min-width:1080px) {
html {
font-size: 32px
}
}
61.移å¨ç«¯ touch äºä»¶(åºå webkit å winphone)
å½ç¨æ·æææ¾å¨ç§»å¨è®¾å¤å¨å±å¹ä¸æ»å¨ä¼è§¦åçtouchäºä»¶
以ä¸æ¯æwebkit
· touchstartââå½ææ触碰å±å¹æ¶ååçãä¸ç®¡å½åæå¤å°åªææ
· touchmoveââå½ææå¨å±å¹ä¸æ»å¨æ¶è¿ç»è§¦åãé常æ们åæ»å±é¡µé¢ï¼ä¼è°ç¨eventçpreventDefault()å¯ä»¥é»æ¢é»è®¤æ
åµçåçï¼é»æ¢é¡µé¢æ»å¨
· touchendââå½ææ离å¼å±å¹æ¶è§¦å
· touchcancelââç³»ç»åæ¢è·è¸ªè§¦æ¸æ¶åä¼è§¦åãä¾å¦å¨è§¦æ¸è¿ç¨ä¸çªç¶é¡µé¢alert()ä¸ä¸ªæ示æ¡ï¼æ¤æ¶ä¼è§¦å该äºä»¶ï¼è¿ä¸ªäºä»¶æ¯è¾å°ç¨
以ä¸æ¯æwinphone 8
· MSPointerDownââå½ææ触碰å±å¹æ¶ååçãä¸ç®¡å½åæå¤å°åªææ
· MSPointerMoveââå½ææå¨å±å¹ä¸æ»å¨æ¶è¿ç»è§¦åãé常æ们åæ»å±é¡µé¢ï¼ä¼è°ç¨cssçhtml{-ms-touch-action:
none;}å¯ä»¥é»æ¢é»è®¤æ
åµçåçï¼é»æ¢é¡µé¢æ»å¨
· MSPointerUpââå½ææ离å¼å±å¹æ¶è§¦å
62.移å¨ç«¯ click å±å¹äº§ç 200-300 ms ç延è¿ååº
移å¨è®¾å¤ä¸çwebç½é¡µæ¯æ300ms延è¿çï¼ç©ç©ä¼é ææé®ç¹å»å»¶è¿çè³æ¯ç¹å»å¤±æã
以ä¸æ¯åå²åå ï¼
2007å¹´è¹æåå¸é¦æ¬¾iphoneä¸IOSç³»ç»æè½½çsafari为äºå°éç¨äºPC端ä¸å¤§å±å¹çç½é¡µè½æ¯è¾å¥½çå±ç¤ºå¨ææºç«¯ä¸ï¼ä½¿ç¨äºåå»ç¼©æ¾ (double tap to zoom)çæ¹æ¡ï¼æ¯å¦ä½ å¨ææºä¸ç¨æµè§å¨æå¼ä¸ä¸ªPCä¸çç½é¡µï¼ä½ å¯è½å¨çå°é¡µé¢å
容è½ç¶å¯ä»¥æ满æ´ä¸ªå±å¹ï¼ä½æ¯åä½ãå¾çé½å¾å°çä¸æ¸
ï¼æ¤æ¶å¯ä»¥å¿«é åå»å±å¹ä¸çæä¸é¨åï¼ä½ å°±è½çæ¸
该é¨åæ¾å¤§åçå
容ï¼å次åå»åè½åå°åå§ç¶æã
åå»ç¼©æ¾æ¯æç¨ææå¨å±å¹ä¸å¿«éç¹å»ä¸¤æ¬¡ï¼iOS èªå¸¦ç Safari æµè§å¨ä¼å°ç½é¡µç¼©æ¾è³åå§æ¯ä¾ã
åå å°±åºå¨æµè§å¨éè¦å¦ä½å¤æå¿«éç¹å»ä¸ï¼å½ç¨æ·å¨å±å¹ä¸åå»æä¸ä¸ªå
ç´ æ¶åï¼ä¾å¦è·³è½¬é¾æ¥ï¼æ¤å¤æµè§å¨ä¼å
æè·è¯¥æ¬¡åå»ï¼ä½æµè§å¨ä¸è½å³å®ç¨æ·æ¯
å纯è¦ç¹å»é¾æ¥è¿æ¯è¦åå»è¯¥é¨ååºåè¿è¡ç¼©æ¾æä½ï¼æ以ï¼æè·ç¬¬ä¸æ¬¡åå»åï¼æµè§å¨ä¼å
Holdä¸æ®µæ¶é´tï¼å¦æå¨tæ¶é´åºé´éç¨æ·æªè¿è¡ä¸ä¸æ¬¡ç¹å»ï¼å æµè§å¨ä¼ååå»è·³è½¬é¾æ¥çå¤çï¼å¦ætæ¶é´éç¨æ·è¿è¡äºç¬¬äºæ¬¡åå»æä½ï¼åæµè§å¨ä¼ç¦æ¢è·³è½¬ï¼è½¬èè¿è¡å¯¹è¯¥é¨ååºå页é¢ç缩æ¾æä½ãé£ä¹è¿ä¸ªæ¶é´åºé´tæ å¤å°å¢ï¼å¨IOS safariä¸ï¼å¤§æ¦ä¸º300毫ç§ãè¿å°±æ¯å»¶è¿çç±æ¥ãé æçåæç¨æ·çº¯ç²¹åå»é¡µé¢ï¼é¡µé¢éè¦è¿ä¸æ®µæ¶é´æååºï¼ç»ç¨æ·æ
¢ä½éªæè§ï¼å¯¹äºwebå¼åè
æ¥è¯´
æ¯ï¼é¡µé¢jsæè·clickäºä»¶çåè°å½æ°å¤çï¼éè¦300msåæçæï¼ä¹å°±é´æ¥å¯¼è´å½±åå
¶ä»ä¸å¡é»è¾çå¤çã
解å³æ¹æ¡ï¼
· fastclickå¯ä»¥è§£å³å¨ææºä¸ç¹å»äºä»¶ç300ms延è¿
· zeptoçtouch模åï¼tapäºä»¶ä¹æ¯ä¸ºäºè§£å³å¨clickç延è¿é®é¢
触æ¸äºä»¶çååºé¡ºåº
1ãontouchstart
2ãontouchmove
3ãontouchend
4ãonclick
解å³300ms延è¿çé®é¢ï¼ä¹å¯ä»¥éè¿ç»å®ontouchstartäºä»¶ï¼å 快对äºä»¶çååºã
63.ä»ä¹æ¯ Retina
æ¾ç¤ºå±ï¼å¸¦æ¥äºä»ä¹é®é¢
retinaï¼ä¸ç§å
·å¤è¶
é«åç´ å¯åº¦ç液æ¶å±ï¼åæ ·å¤§å°çå±å¹ä¸æ¾ç¤ºçåç´ ç¹ç±1个å为å¤ä¸ªï¼å¦å¨åæ ·å¸¦ä¸çå±å¹ä¸ï¼è¹æ设å¤çretinaæ¾ç¤ºå±ä¸ï¼åç´ ç¹1个å为4个
å¨é«æ¸
æ¾ç¤ºå±ä¸çä½å¾è¢«æ¾å¤§ï¼å¾çä¼åå¾æ¨¡ç³ï¼å æ¤ç§»å¨ç«¯çè§è§ç¨¿é常ä¼è®¾è®¡ä¸ºä¼ ç»PCç2åã
é£ä¹ï¼å端çåºå¯¹æ¹æ¡æ¯ï¼
设计稿ååºæ¥çå¾çé¿å®½ä¿è¯ä¸ºå¶æ°ï¼å¹¶ä½¿ç¨backgroud-sizeæå¾ç缩å°ä¸ºåæ¥ç1/2
//ä¾å¦å¾ç宽é«ä¸ºï¼200px*200pxï¼é£ä¹åæ³å¦ä¸
.css{width:100px;height:100px;background-size:100px 100px;}
å
¶å®å
ç´ çåå¼ä¸ºåæ¥ç1/2ï¼ä¾å¦è§è§ç¨¿40pxçåä½ï¼ä½¿ç¨æ ·å¼çåæ³ä¸º20px
.css{font-size:20px}
64.ios ç³»ç»ä¸å ç´ è¢«è§¦æ¸æ¶äº§ççåéæç°è²é®ç½©æä¹å»æ
iosç¨æ·ç¹å»ä¸ä¸ªé¾æ¥ï¼ä¼åºç°ä¸ä¸ªåéæç°è²é®ç½©, å¦ææ³è¦ç¦ç¨ï¼å¯è®¾ç½®-webkit-tap-highlight-colorçalphaå¼ä¸º0ï¼ä¹å°±æ¯å±æ§å¼çæåä¸ä½è®¾ç½®ä¸º0å°±å¯ä»¥å»é¤åéæç°è²é®ç½©ã
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
65.é¨å android ç³»ç»ä¸å ç´ è¢«ç¹å»æ¶äº§ççè¾¹æ¡æä¹å»æ
androidç¨æ·ç¹å»ä¸ä¸ªé¾æ¥ï¼ä¼åºç°ä¸ä¸ªè¾¹æ¡æè
åéæç°è²é®ç½©, ä¸åç产åå®ä¹åºæ¥é¢ææä¸ä¸æ ·ï¼å¯è®¾ç½®-webkit-tap-highlight-colorçalphaå¼ä¸º0å»é¤é¨åæºå¨èªå¸¦çææã
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modifyæ个å¯ä½ç¨ï¼å°±æ¯è¾å
¥æ³ä¸åè½å¤è¾å
¥å¤ä¸ªå符ã
å¦å¤ï¼æäºæºåå»é¤ä¸äºï¼å¦å°ç±³2
对äºæé®ç±»è¿æ个åæ³ï¼ä¸ä½¿ç¨aæè
inputæ ç¾ï¼ç´æ¥ç¨divæ ç¾
66.winphone ç³»ç» aãinput æ ç¾è¢«ç¹å»æ¶äº§ççåéæç°è²èæ¯æä¹å»æ
<meta name="msapplication-tap-highlight" content="no">
67.webkit 表åå ç´ çé»è®¤å¤è§æä¹éç½®
.css{-webkit-appearance:none;}
68.webkit 表åè¾å ¥æ¡ placeholder çé¢è²å¼è½æ¹åä¹
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#E
69.webkit 表åè¾å ¥æ¡ placeholder çæåè½æ¢è¡ä¹
iOSå¯ä»¥ï¼Androidä¸è¡~
1. å
³éiOSé®çé¦åæ¯èªå¨å¤§å
å¨iOSä¸ï¼é»è®¤æ
åµä¸é®çæ¯å¼å¯é¦åæ¯å¤§åçåè½çï¼å¦æå¯ç¨è¿ä¸ªåè½ï¼å¯ä»¥è¿æ ·ï¼
<input type="text" autocapitalize="off" />
70. å ³é iOS è¾å ¥èªå¨ä¿®æ£
åè±æè¾å
¥é»è®¤èªå¨é¦åæ¯å¤§åé£æ ·ï¼IOSè¿åäºä¸ä¸ªåè½ï¼é»è®¤è¾å
¥æ³ä¼å¼å¯èªå¨ä¿®æ£è¾å
¥å
容ï¼è¿æ ·çè¯ï¼ç¨æ·ç»å¸¸è¦æä½ä¸¤æ¬¡ãå¦æä¸å¸æå¼å¯æ¤åè½ï¼æ们å¯ä»¥éè¿inputæ ç¾å±æ§æ¥å
³éæï¼
<input type="text" autocorrect="off" />
71. ç¦æ¢ææ¬ç¼©æ¾
å½ç§»å¨è®¾å¤æ¨ªç«å±åæ¢æ¶ï¼ææ¬ç大å°ä¼éæ°è®¡ç®ï¼è¿è¡ç¸åºç缩æ¾ï¼å½æ们ä¸éè¦è¿ç§æ
åµæ¶ï¼å¯ä»¥éæ©ç¦æ¢ï¼
html {
-webkit-text-size-adjust: 100%;
}
éè¦æ³¨æçæ¯ï¼PC端ç该å±æ§å·²ç»è¢«ç§»é¤ï¼è¯¥å±æ§å¨ç§»å¨ç«¯è¦çæï¼å¿
须设置 meta viewportã
72. 移å¨ç«¯å¦ä½æ¸ é¤è¾å ¥æ¡å é´å½±
å¨iOSä¸ï¼è¾å
¥æ¡é»è®¤æå
é¨é´å½±ï¼ä½æ æ³ä½¿ç¨ box-shadow æ¥æ¸
é¤ï¼å¦æä¸éè¦é´å½±ï¼å¯ä»¥è¿æ ·å
³éï¼
input,
textarea {
border: 0; /* æ¹æ³1 */
-webkit-appearance: none; /* æ¹æ³2 */
}
73. å¿«éåå¼¹æ»å¨
æ们å
æ¥ççåå¼¹æ»å¨å¨ææºæµè§å¨åå±çåå²ï¼
· æ©æçæ¶åï¼ç§»å¨ç«¯çæµè§å¨é½ä¸æ¯æébodyå
ç´ çæ»å¨æ¡ï¼æ以ä¸è¬é½åå© iScroll;
· Android 3.0/iOS解å³äºébodyå
ç´ çæ»å¨é®é¢ï¼ä½æ»å¨æ¡ä¸å¯è§ï¼åæ¶iOSä¸åªè½éè¿2个ææè¿è¡æ»å¨ï¼
· Android 4.0解å³äºæ»å¨æ¡ä¸å¯è§åå¢å äºå¿«éåå¼¹æ»å¨ææï¼ä¸è¿éåè¿ä¸ªç¹æ§å被移é¤ï¼
· iOSä»5.0å¼å§è§£å³äºæ»å¨æ¡ä¸å¯è§åå¢å äºå¿«éåå¼¹æ»å¨ææ
å¨iOSä¸å¦æä½ æ³è®©ä¸ä¸ªå
ç´ æ¥æå Native çæ»å¨ææï¼ä½ å¯ä»¥è¿æ ·åï¼
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PSï¼iScrollç¨è¿ä¹åæè§ä¸æ¯å¾å¥½ï¼æä¸äºè¯¡å¼çbugï¼è¿éæ¨èå¦å¤ä¸ä¸ª iDangero Swiperï¼è¿ä¸ªæ件éæäºæ»å±æ»å¨ç强大åè½ï¼æ¯æ3Dï¼ï¼èä¸è¿æåå¼¹æ»å¨çå
ç½®æ»å¨æ¡ãiDangeroå®æ¹å°åï¼ :www.idangero.us/swiper/#.VX_t9PmEB8Y
74. 移å¨ç«¯ç¦æ¢éä¸å 容
å¦æä½ ä¸æ³ç¨æ·å¯ä»¥éä¸é¡µé¢ä¸çå
容ï¼é£ä¹ä½ å¯ä»¥å¨cssä¸ç¦æï¼
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all ï¼ç§»å¨ç«¯ä¸éè¦ï¼ */
-ms-user-select: none; /* IE 10+ */
}
75. 移å¨ç«¯åæ¶ touch é«äº®ææ
å¨å移å¨ç«¯é¡µé¢æ¶ï¼ä¼åç°ææ a æ ç¾å¨è§¦åç¹å»æ¶æè ææ设置äºä¼ªç±» :active çå ç´ ï¼é»è®¤é½ä¼å¨**ç¶ææ¶ï¼æ¾ç¤ºé«äº®æ¡ï¼å¦æä¸æ³è¦è¿ä¸ªé«äº®ï¼é£ä¹ä½ å¯ä»¥éè¿ css 以ä¸æ¹æ³æ¥è¿è¡å ¨å±çç¦æ¢ï¼
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ä½è¿ä¸ªæ¹æ³å¨ä¸æçæºåä¸æ æï¼æä¸ç§å¦¥åçæ¹æ³æ¯æ页é¢éçå®è·³è½¬é¾æ¥ç a æ ç¾æ¢æå ¶å®æ ç¾ï¼å¯ä»¥è§£å³è¿ä¸ªé®é¢ã
76. å¦ä½ç¦æ¢ä¿åææ·è´å¾åï¼IOSï¼
é常å½ä½ å¨ææºæè pad ä¸é¿æå¾å img ï¼ä¼å¼¹åºé项åå¨å¾å æè æ·è´å¾åï¼å¦æä½ ä¸æ³è®©ç¨æ·è¿ä¹æä½ï¼é£ä¹ä½ å¯ä»¥éè¿ä»¥ä¸æ¹æ³æ¥ç¦æ¢ï¼
img { -webkit-touch-callout: none; }
77.模ææé® hover ææ
移å¨ç«¯è§¦æ¸æé®çææï¼å¯æ示ç¨æ·æäºäºæ
æ£è¦åçï¼æ¯ä¸ä¸ªæ¯è¾å¥½ä½éªï¼ä½æ¯ç§»å¨è®¾å¤ä¸å¹¶æ²¡æé¼ æ æéï¼ä½¿ç¨cssçhover并ä¸è½æ»¡è¶³æ们çéæ±ï¼è¿å¥½å½å¤æ个**cssçactiveææï¼ä»£ç å¦ä¸ï¼
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">æé®</div>
<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>
å
¼å®¹æ§ios5+ãé¨åandroid 4+ãwinphone 8
è¦åå°å
¨å
¼å®¹çåæ³ï¼å¯éè¿ç»å®ontouchstartåontouchendæ¥æ§å¶æé®çç±»åã
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">æé®</div>
<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>
</body>
</html>
78.å±å¹æ转çäºä»¶åæ ·å¼äºä»¶
window.orientationï¼åå¼ï¼æ£è´90表示横å±æ¨¡å¼ã0å180表ç°ä¸ºç«å±æ¨¡å¼ï¼
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横å±:" + window.orientation);
case 0:
case 180:
alert("ç«å±:" + window.orientation);
break;
}
}
æ ·å¼
//ç«å±æ¶ä½¿ç¨çæ ·å¼
@media all and (orientation:portrait) {
.css{}
}
//横å±æ¶ä½¿ç¨çæ ·å¼
@media all and (orientation:landscape) {
.css{}
}
79.audio å ç´ å video å ç´ å¨ ios å andriod ä¸æ æ³èªå¨ææ¾
åºå¯¹æ¹æ¡ï¼è§¦å±å³æ
$(âhtmlâ).one(âtouchstartâ,function(){
audio.play()
})
80.æä¸æåè½
HTML5 deviceMotionï¼å°è£ äºè¿å¨ä¼ æå¨æ°æ®çäºä»¶ï¼å¯ä»¥è·åææºè¿å¨ç¶æä¸çè¿å¨å é度çæ°æ®ã
81.ææºæç §åä¸ä¼ å¾ç
<input type="file">çaccept å±æ§
<!â éæ©ç
§ç â>
<input type=file accept="image/*">
<!â éæ©è§é¢ â>
<input type=file accept="video/*">
使ç¨æ»ç»ï¼
· iOSææç
§ãå½åãéåæ¬å°å¾çåè½
· é¨åandroidåªæéåæ¬å°å¾çåè½
· winphoneä¸æ¯æ
· inputæ§ä»¶é»è®¤å¤è§ä¸é
82.æ¶é¤ transition éªå±
.css{
/*设置å
åµçå
ç´ å¨ 3D 空é´å¦ä½åç°ï¼ä¿ç 3D*/
-webkit-transform-style: preserve-3d;
/*ï¼è®¾ç½®è¿è¡è½¬æ¢çå
ç´ çèé¢å¨é¢å¯¹ç¨æ·æ¶æ¯å¦å¯è§ï¼éèï¼*/
-webkit-backface-visibility: hidden;
}
å¼å¯ç¡¬ä»¶å é
· 解å³é¡µé¢éªç½
· ä¿è¯å¨ç»æµç
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
设计é«æ§è½CSS3å¨ç»çå 个è¦ç´
· å°½å¯è½å°ä½¿ç¨åæå±æ§transformåopacityæ¥è®¾è®¡CSS3å¨ç»
· ä¸ä½¿ç¨positionçleftåtopæ¥å®ä½
· å©ç¨translate3Då¼å¯GPUå é
83. android ä¸å»æè¯é³è¾å ¥æé®
input::-webkit-input-speech-button {display: none}
84.移å¨ç«¯ HTML5 audio autoplay 失æé®é¢
85.ä¸åæµè§å¨çæ ç¾é»è®¤å¤è¡¥ä¸ margin åå è¡¥ä¸ padding ä¸å
åçæ¦çï¼100%
解å³æ¹æ¡ï¼ä½¿ç¨ CSS éé 符*ï¼è®¾ç½®å å¤è¡¥ä¸ä¸º 0
*{ margin: 0; padding: 0;}
86. åå±æ§æ ç¾ float ä¹åï¼åæ横åç margin å¼ï¼å¨ IE6 ä¸æ¾ç¤ºä¼æ¯è®¾ç½®ç大ï¼IE6 åè¾¹è· bugï¼
åçæ¦çï¼90%
解å³æ¹æ¡ï¼å¨ float æ ç¾æ ·å¼æ§å¶ä¸å å ¥ display:inline;
87. 设置è¾å°çé«åº¦æ ç¾ï¼ä¸è¬å°äº 10pxï¼ï¼å¨ IE6ï¼IE7ï¼é¨æ¸¸ä¸è¶ åºèªå·±è®¾ç½®çé«åº¦
åçæ¦çï¼60%
解å³æ¹æ¡ï¼ç»è¶ åºé«åº¦çæ ç¾è®¾ç½® overflow:hidden;æè 设置è¡é« line-height å°äºä½ 设置çé«åº¦ã
88. è¡å æ ç¾è®¾ç½® display:block;ååéç¨ float å¸å±ï¼å设置横å margin å¼æ¶ï¼å¨ IE6 ä¸æ¾ç¤ºä¼æ¯è®¾ç½®ç大ï¼IE6 åè¾¹è· bugï¼
åç���çï¼20%
解å³æ¹æ¡ï¼å¨ display:block;åé¢å ä¸ display:inline;display:table;
89. å¾çé»è®¤æé´è·
åçæ¦çï¼20%
解å³æ¹æ¡ï¼ä½¿ç¨ float 为 img å¸å±
90. æ ç¾æä½é«åº¦è®¾ç½® min-height ä¸å ¼å®¹
åçæ¦çï¼5%
解å³æ¹æ¡ï¼ä¾å¦è¦è®¾ç½®ä¸ä¸ªæ ç¾çæå°é«åº¦ä¸º 200px
{ min-height: 200px;
height: auto!important;
height: 200px;
overflow: visible;}
91. éæåº¦å ¼å®¹è®¾ç½®
åçæ¦çï¼ä¸»è¦çä½ è¦åçä¸è¥¿è®¾ä¸è®¾éæ度
解å³æ¹æ¡ï¼ä¸å¥è¯
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
opacity:0.5; This is the âmost important" one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they donât.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.
-khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .
92. Box Model ç bug
æè¿°ï¼ç»ä¸ä¸ªå ç´ è®¾ç½®äºé«åº¦å宽度çåæ¶ï¼è¿ä¸ºå ¶è®¾ç½® margin å padding çå¼ï¼ä¼æ¹å该å ç´ çå®é 大å°ã
解å³åæ³ï¼å¨éè¦å margin å padding ç div å é¨å ä¸ä¸ª div,å¨è¿ä¸ª div é设置 margin å padding å¼ã
93. IE6 ä¸çå表 li æ¥¼æ¢¯ç¶ bug
æè¿°ï¼éå¸¸å¨ li ä¸çå ç´ ï¼æ¯å¦ aï¼è®¾ç½®äºæµ®å¨ floatï¼ä½ li æ¬èº«ä¸æµ®å¨ã
解å³åæ³ï¼
ul li{float:left;}
æ ul li{display:inline;}
94.li 空ç½é´è·
æè¿°ï¼å¨ IE ä¸ï¼ä¼å¢å li å li ä¹é´çåç´é´è·
解å³åæ³ï¼ç» li éç a æ¾å¼çæ·»å 宽度æè é«åº¦
li a{width:20px;}
æè
li a{display:block;float:left;clear:left;}
æè
li {display:inline;}
li a{display:block;}
æè
å¨æ¯ä¸ªå表 li ä¸è®¾ç½®ä¸ä¸ªå®çº¿çåºè¾¹ï¼é¢è²å li çèæ¯è²ç¸å
95.overflowï¼auto;å position:relative ç碰æ
æè¿°ï¼æ¤ bug åªåºç°å¨ IE6 å IE7 ä¸ï¼æ两个å级å ç´ ï¼ç¶å ç´ è®¾ç½®äº overflowï¼auto;åå ç´ è®¾ç½®äº position:relative;ä¸é«åº¦å¤§äºç¶å ç´ ï¼å¨ IE6-7 ä¸åå ç´ ä¸ä¼è¢«éèèæ¯æº¢åºã
解å³æ¹æ¡ï¼ç»ç¶å ç´ ä¹è®¾ç½® position:relative;
96.æµ®å¨å±çéä½
æè¿°ï¼å½å å®¹è¶ åºå¤å 容å¨å®ä¹ç宽度æ¶ä¼å¯¼è´æµ®å¨å±éä½é®é¢ãå¨ FirefoxãIE7ãIE8 åå ¶ä»æ åæµè§å¨é,è¶ åºçå å®¹ä» ä» åªæ¯è¶ åºè¾¹ç¼;ä½å¨ IE6 ä¸å®¹å¨ä¼å¿½è§å®ä¹ç width å¼,宽度ä¼é误å°éå 容宽度å¢é¿èå¢é¿ãå¦æå¨è¿ä¸ªæµ®å¨å ç´ ä¹åè¿è·çä¸ä¸ªæµ®å¨å ç´ ,é£ä¹å°±ä¼å¯¼è´éä½é®é¢ã
解å³æ¹æ¡ï¼overflowï¼hidden;
97.IE6 å éææ¬ç bug
æè¿°ï¼è¥ä½ ç代ç ç»æå¦ä¸
<div>
â¦â¦
å¾æå¯è½å¨ IE6 ç½é¡µä¸åºç°ä¸æ®µç©ºç½ææ¬
解å³æ¹æ¡ï¼
使ç¨æ¡ä»¶æ³¨é
å é¤ææ注é
å¨æ³¨éåé¢çé£ä¸ªæµ®å¨å ç´ å ä¸ displayï¼inlineï¼
98.IE çå¾ç缩æ¾
æè¿°ï¼å¾çå¨ IE ä¸ç¼©æ¾ææ¶ä¼å½±åå ¶è´¨é
解å³æ¹æ¡ï¼img{ -mg-interpolation-mode:bicubic;}
99.IE6 ä¸ png å¾ççéæ bug
æè¿°ï¼ä½¿ç¨éæå¾ç,ä½¿ç¨ png24 æ png32 å¾çå¨ IE6 ä¸é¢æ¾ç¤ºå¾çä¼æä¸å±æ·¡èè²çèæ¯ã
解å³æ¹æ¡ï¼
.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}
æ
<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />
100.<iframe>
éæèæ¯ bug
æè¿°ï¼å¨ IE æµè§å¨ä¸ï¼æ¡æ¶ä¸ä¼èªå¨æèæ¯è®¾ä¸ºéæ
解å³æ¹æ¡ï¼
<iframesrc="content.html"allowTransparency=âtrueâ>
å¨ iframe è°ç¨ç content.html 页é¢ä¸è®¾ç½®
body{background-color: transparent;}
101.ç¦ç¨ IE é»è®¤çåç´æ»å¨æ¡
解å³æ¹æ¡ï¼
html{
overflow:auto;
}
102. é»è®¤çå å¤è¾¹è·ä¸å
é®é¢è¯´æï¼
å个æµè§å¨é»è®¤çå å¤è¾¹è·ä¸å
解å³æ¹æ¡ï¼
*{margin:0;padding:0;}
103.æ°´å¹³å± ä¸çé®é¢
é®é¢è¯´æï¼
- 设置 text-align: center
- ie6-7 ææ¬å± ä¸ï¼åµå¥çåå ç´ ä¹ä¼å± ä¸
- ff /opera /safari /ie8 ææ¬ä¼å±
ä¸ï¼åµå¥åä¸ä¼å±
ä¸
解å³æ¹æ³ï¼ - åå ç´ è®¾ç½®
- 1ãmargin-left:auto;margin-right:auto
- 2ãmargin:0 auto;
- 3ã
104.åç´å± ä¸çé®é¢
é®é¢è¯´æï¼
å¨æµè§å¨ä¸æ³è¦åç´å±
ä¸ï¼è®¾ç½® vertical-align:middle; ä¸èµ·ä½ç¨ãä¾å¦ï¼ie6 ä¸ææ¬ä¸ææ¬è¾å
¥æ¡å¯¹ä¸é½ï¼é设置 vertical-align:middleï¼ä½æ¯ææ¬æ¡çå
容ä¸ä¼åç´å±
ä¸
解å³æ¹æ³ï¼
ç»å®¹å¨è®¾ç½®ä¸ä¸ªä¸å
¶é«åº¦ç¸åçè¡é«
line-height:ä¸å®¹å¨ç height ä¸æ ·
4.
æ¾ç¤ºç大å°ä¸ä¸è´
说æï¼
é»è®¤åæ¬æ¾ç¤ºé®é¢ï¼å¯¼è´ æ¾ç¤ºç大å°ä¸ä¸è´ï¼å¨ ie ä¸æ¯è¾å°ä¸ç¹ï¼å
¶ä»çæµè§å¨é½ä¸è´ï¼å½ä½ 使ç¨äº é æé®é¢æ¶è¯·æ³¨æã
5. è¾¹æ¡éå 说æ
说æï¼
为 tableãtd é½æå®äºè¾¹æ¡åï¼ç¶åä½¿ç¨ border-collapse:collapse 让边æ¡éå ï¼å¯ä»¥çåºå¨åçéå æ¶ï¼Firefox æ¯ç¨ td è¦ç table çï¼è IE æ¯ç¨ table è¦ç td çã使ç¨æ¶åéè¦æ³¨æã
6. 设置 td padding ç说æ
说æï¼
设置 td ç padding 以åé«åº¦å宽带é½ä¼å¢å ,padding-left å padding-right çææé½ä¸æ ·å¢å äº td ç宽带ï¼ä½æ¯ padding-top å padding-bottom çææä¸ä¸æ ·ãæ好ä¸è¦ä½¿ç¨ td ç padding-top å padding-bottom
7. ul 设置ç说æ
说æï¼
ul ä¸è¬è®¾ç½®ï¼list-style-type:none;margin:0px;padding:0pxï¼li ä¸è¬è®¾ç½®ï¼list-style-type:none;list-style-position:outside
8. 使ä¸ä¸ªå±åç´å± ä¸äºæµè§å¨ä¸
说æï¼
使ç¨ç¾åæ¯ç»å¯¹å®ä½,ä¸å¤è¡¥ä¸è´å¼çæå·§,è´å¼ç大å°ä¸ºå
¶èªèº«å®½åº¦é«åº¦é¤ä»¥äº
div {
position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;
width:200px; height:200px; border:1px solidred;
}
10. 触å layout
说æï¼
IE6 ä¸å¾å¤ Bug é½å¯ä»¥éè¿è§¦å layout å¾å°è§£å³.ä¸åç CSS å±æ§æåå¼ä¼è®©ä¸ä¸ªå
ç´ è·å¾ layoutï¼
position:absolute ç»å¯¹å®ä½å
ç´ çå
å«åºå(containingblock)å°±ä¼ç»å¸¸å¨è¿ä¸æ¹é¢åºé®é¢
float:left|right ç±äº layout å
ç´ çç¹æ§ï¼æµ®å¨æ¨¡åä¼æå¾å¤æªå¼ç表ç°
display:inline-block å½ä¸ä¸ªå
è级å«çå
ç´ éè¦ layout çæ¶åå°±å¾å¾ç¬¦ç¨å°å®ï¼è¿ä¹å¯è½ä¹æ¯è¿ä¸ª CSS å±æ§çå¯ä¸ææ----让æ个å
ç´ æ layout
width: é¤ auto å¤çä»»ä½å¼
height: é¤ auto å¤çä»»ä½å¼
zoom: é¤ auto å¤çä»»ä½å¼
11ãå¦ä½ä½¿è¿ç»é¿å段èªå¨æ¢è¡
ff ææ°çæ¬ word-wrap:break-word;å°±å¯ä»¥äº
ff æ§çæ¬ è¿è¦ä½¿ç¨ javascript å®ææåæ¢è¡
<style type="text/css">
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
</style>
<scripttype="text/javascript">
function toBreakWord(intLen){
varobj=document.getElementByIdx_x("ff");
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.getElementByIdx_x && !document.all) toBreakWord(37)
12. 设置æ»å¨æ¡é¢è² åªå¯¹ ie ç³»åææ å¨ html ä¸ èä¸æ¯è®¾ç½® body
<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>
IE ä¸æ¯æ floatï¼inherit overflow:hidden æ 2 个ç¨æ³ï¼ä¸ä¸ªæ¯éè溢åºï¼å¦ä¸ä¸ªæ¯æ¸ é¤æµ®å¨ã
<div>, <p>, <h1>,<form>, <ul> å <li>æ¯åå
ç´ çä¾å
<span>, <a>, <label>,<input>, <img>, <strong> å<em>æ¯inlineå
ç´
<body oncontextmenu="returnfalse" ondragstart="return false" tstart="returnfalse" scroll="auto">
è¿è¡ä»£ç æ¾å¨bodyä¸ï¼å»æäºé¡µé¢é¼ æ å³é®å¿«æ·èåï¼è¾¾å°é²æ¢å¾çå¦å为çç®çã
2. éå类对象é®é¢
é®é¢è¯´æï¼
代ç ä¸è®¸å¤éå类对象åç¨æ¶ä½¿ç¨()ï¼IE è½æ¥åï¼FF ä¸è½
解å³æ¹æ³ï¼
æ¹ç¨ [] ä½ä¸ºä¸æ è¿ç®ï¼ä¾ï¼
document.getElementsByName(âinputNameâ)(1) æ¹ä¸º document.getElementsByName(âinputNameâ)[1]
3. window.event
é®é¢è¯´æï¼
ä½¿ç¨ window.event æ æ³å¨ FF ä¸è¿è¡
解å³æ¹æ³ï¼
FF ç event åªè½å¨äºä»¶åççç°åºä½¿ç¨ï¼æ¤é®é¢ææ æ³è§£å³ãå¯ä»¥æ event ä¼ å°å½æ°éåé解å³æ¹æ³ï¼
onMouseMove = âfunctionName(event)â
function functionName (e) {
e = e || window.event;
â¦
}
4. HTML 对象ç id ä½ä¸ºå¯¹è±¡åçé®é¢
é®é¢è¯´æï¼
å¨ IE ä¸ï¼HTML 对象ç ID å¯ä»¥ä½ä¸º document çä¸å±å¯¹è±¡åéåç´æ¥ä½¿ç¨ï¼å¨ FF ä¸ä¸è½
解å³æ¹æ³ï¼
使ç¨å¯¹è±¡åéæ¶å
¨é¨ç¨æ åç getElementById(âidNameâ)
5. ç¨ idName å符串åå¾å¯¹è±¡çé®é¢
é®é¢è¯´æï¼
å¨ IE ä¸ï¼å©ç¨ eval_r(âidNameâ) å¯ä»¥åå¾ id 为 idName ç HTML 对象ï¼å¨ FF ä¸ä¸è½
解å³æ¹æ³ï¼
ç¨ getElementById(âidNameâ) ä»£æ¿ eval_r(âidNameâ)
9. åå¾å ç´ çå±æ§
å¨ FF ä¸ï¼èªå·±å®ä¹çå±æ§å¿ é¡» getAttribute() åå¾
10. å¨ FF ä¸æ²¡æ parentElementï¼parement.children èç¨ parentNodeï¼parentNode.childNodes
é®é¢è¯´æï¼
childNodes çä¸æ çå«ä¹å¨ IE å FF ä¸ä¸åï¼FF ç childNodes ä¸ä¼æå
¥ç©ºç½ææ¬èç¹
解å³æ¹æ³ï¼
å¯ä»¥éè¿ node.getElementsByTagName_r() æ¥åé¿è¿ä¸ªé®é¢
é®é¢è¯´æï¼
å½ html ä¸èç¹ç¼ºå¤±æ¶ï¼IE å FF 对 parentNode ç解éä¸åï¼ä¾å¦ï¼
<form>
<table>
<input/>
</table>
</form>
FFä¸ input.parentNode çå¼ä¸ºformï¼èIEä¸ input.parentNode çå¼ä¸ºç©ºèç¹
é®é¢è¯´æï¼
FFä¸èç¹èªå·±æ²¡æ removeNode æ¹æ³
解å³æ¹æ³ï¼
å¿
须使ç¨å¦ä¸æ¹æ³ node.parentNode.removeChild(node)
12. body 对象
FF ç body å¨ body æ ç¾æ²¡æ被æµè§å¨å®å
¨è¯»å
¥ä¹åå°±åå¨ï¼è IE åå¿
é¡»å¨ body å®å
¨è¢«è¯»å
¥ä¹åæåå¨
è¿ä¼äº§çå¨ IE ä¸ï¼æ档没æè½½å
¥å®æ¶ï¼å¨ body ä¸ appendChild ä¼åºç°ç©ºç½é¡µé¢çé®é¢
解å³æ¹æ³ï¼
ä¸åå¨ body ä¸æå
¥èç¹çå¨ä½ï¼å
¨é¨å¨ onload åè¿è¡
13. url encoding
é®é¢è¯´æï¼
ä¸è¬ FF æ æ³è¯å« js ä¸ç&
解å³æ¹æ³ï¼
å¨ js ä¸å¦æ书å url å°±ç´æ¥å&ä¸è¦å&
14. nodeName å tagName é®é¢
é®é¢è¯´æï¼
å¨ FF ä¸ï¼ææèç¹åæ nodeName å¼ï¼ä½ textNode 没æ tagName å¼ï¼å¨ IE ä¸ï¼nodeName ç使ç¨æé®é¢
解å³æ¹æ³ï¼
ä½¿ç¨ tagNameï¼ä½åºæ£æµå
¶æ¯å¦ä¸ºç©º
15. å ç´ å±æ§
IE ä¸ input.type å±æ§ä¸ºåªè¯»ï¼ä½æ¯ FF ä¸å¯ä»¥ä¿®æ¹
16. document.getElementsByName() å document.all[name] çé®é¢
é®é¢è¯´æï¼
å¨ IE ä¸ï¼getElementsByName()ãdocument.all[name] åä¸è½ç¨æ¥åå¾ div å
ç´
æ¯å¦è¿æå
¶å®ä¸è½åçå
ç´ è¿ä¸ç¥éï¼è¿ä¸ªé®é¢è¿æäºè®®ï¼è¿å¨ç 究ä¸ï¼
17. è°ç¨åæ¡æ¶æè å ¶å®æ¡æ¶ä¸çå ç´ çé®é¢
å¨ IE ä¸ï¼å¯ä»¥ç¨å¦ä¸æ¹æ³æ¥åå¾åå
ç´ ä¸çå¼
document.getElementByIdx_x("frameName").(document.)elementName
window.frames["frameName"].elementName
å¨ FF ä¸åéè¦æ¹æå¦ä¸å½¢å¼æ¥æ§è¡ï¼ä¸ IE å
¼å®¹ï¼
window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName
18. 对象宽é«èµå¼é®é¢
é®é¢è¯´æï¼
FireFox ä¸ç±»ä¼¼ obj.style.height = imgObj.height çè¯å¥æ æ
解å³æ¹æ³ï¼
ç»ä¸ä½¿ç¨ obj.style.height = imgObj.height + "px";
下一篇: html之百度地图接口的使用(代码实例)