1 Css 1.1 選擇器 - 通配符 * :: IE6不支持
- 類選擇器 .class :: IE6元素的class不能超過2個
- 屬性選擇器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
- 關系選擇器 E + F; E > F ; E ~ F :: IE6不支持
1.2 偽類 - :first-letter,:first-line,:visited,:link :: 都支持
- :hover :: IE6只支持A元素，IE7及FF支持A以外元素
- :before和:after :: IE7和firefox支持，好好利用可以實現很多不錯的效果
1.3 !IMPORTANT - 突破樣式表屬性>ID>雙CLASS>單CLASS>元素,后者>前者的層疊順序,不過IE6不支持
1.4 DocType 文檔類型決定了IE的渲染模式，標準模式(standard)還是兼容模式(quirks),并且聲明必須放在所有代碼之前,包括注釋。<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 查看詳情Quirks模式與Standards模式 - 盒模型 標準模式,實際寬度=width+border-width+padding-width+margin-width 兼容模式下,實際寬度=width
- 水平居中 IE中,標準模式下可使用margin:0 auto水平居中。兼容模式下無效。
- 行內元素尺寸 標準模式下不能設置span等行內元素的width和height，兼容模式下可以。
- 不正確的語法 譬如未書寫尺寸單位，大小寫不正確，嵌套不正確等，兼容模式下尺寸采用默認單位px，其它的都盡量修正。標準模式下這條css規則無效。
- 相對高度 元素設定百分比高度時，需要父元素高度已指定，所以最好先指定html和body元素高度為100%
- IE7的新CSS特性 min/max-width/height,position:fixed,:hover,overflow:visible 等在兼容模式下會失效。
- 默認樣式 FF下，在進入quirks模式后，會加載其目錄下的res/quirk.css，設置一些其它的默認樣式
1.5 屬性 1.6 濾鏡(filter) IE私有，效率也比較低，一般不建議使用。 IE: 1 #id{ filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)} FF: 1 #id{opacity:0.6} 1.7 行為(behavier) 在css中使用js, IE特有,借此可實現max-width,min-width等效果，不過效率比較低.同時這里也是可能存在XSS攻擊的地方. 1.8 Bug - 高度不適應 :: 內層設完margin或者padding后比外層高度還高。解決方案:在內層上下各加一個空div.
- 容器不擴展 :: 內存浮動后，外層縮成直線。解決方案:內存結束時清除浮動。
- margin加倍 :: 在IE 5.x、IE6中，為float的盒子指定margin時，左側margin可能會變成兩倍的寬度。通過改用padding或指定盒子為display:inline可以解決
- IE6 3px :: IE6中左浮動div右側的文本和塊與左div的距離會增加3px，解決方法給左側的div增加margin-right:-3px;或者避免使文本直接與左div接觸，同時右側的塊使用display:inline-block
- IE6捉迷藏 :: 一個浮動元素后而跟著一些非浮動元素，然后是一個清理元素，所有這些元素都包含在一個設置了背景顏色或圖像的容器元素中。假如清理元素砬到了浮動元素，那么中間的非浮支元素看起來消失了，隱到了父元素的背景顏色或圖像后面，只有在刷新頁面時才重新出現。解決方案:去掉背景或者容器指定寬高，或者指定行高，或者將浮動元素和容器元素的position屬性設置為relative也會減輕這個問題。
- IE6斷頭臺 :: 當容器中左浮動對象右側直接跟鏈接，并且鏈接的hover狀態屬性有變化的話，可能導致容器的高度重新計算，并切掉左浮動對象的部分內容。解決方案：浮動對象后面不直接跟非浮動對象，或者最后清除浮動。
1.9 css hack - @import
1 @import ("notIE.css") screen; - +_hack
1 #content {
2 width:500px;
3 +width:480px; 4 _width:490px: 5 } - 條件注釋
1 <!--[if lt IE 7]>
2 <link type="text/css" rel="stylesheet" href="cond.css" />
3 <![endif]--> - 更多CSS HACK
2 Javascript 2.1 檢測技術 1 if (window.XMLRequest){
2 this.req = new XMLRequest;
3 }
4 else if (window.ActiveXObject){
5 this.req = new ActiveXObject("Micorsoft.XMLHTTP")
6 }
7 else {
8 throw new Error("Your browser doesn't support an XML HTTP Request.");
9 } 1 var sUserAgent = navigator.userAgent;
2 var fAppVersion = parseFloat(navigator.appVersion);
3 var isOpera = sUserAgent.indexOf("Opera") > -1;
4 var isIE = sUserAgent.indexOf("compatible") > -1
5 && sUserAgent.indexOf("MSIE") > -1
6 && !isOpera;
7 var isMoz = sUserAgent.indexOf("Gecko") > -1
8
9 var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
10 var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
11 || (navigator.platform == "Macintosh");
12 var isUnix = (navigator.platform == "X11") && !isWin && !isMac; - 總結 :: 優先使用對象檢測，盡量避免使用瀏覽器檢測，這樣能夠適應更多的瀏覽器，而且還可以預防未來瀏覽器版本變化導致的一些不兼容問題。
2.2 Event DOM標準中事件模型是先捕獲再冒泡，IE中只有冒泡階段。 事件獲取 - var evt = arguments[0] || window.evt;
添加/刪除事件Handler -
- IE :: attachEvent(window,‘onload’,handler)/distachEvent(window,‘onload’,handler)
- FF :: addEventListener(window,‘load’,handler,false)/removeEventListener(window,‘load’,handler,false)
SCRIPT標簽 - IE中script標簽具有event和for屬性 供事件綁定用 firefox 不支持
常用事件屬性 -
| IE | FF | 說明 |
|---|
| cancelBubble | stopProgation() | 阻止事件起泡 | | srcElement | target | 事件對象 | | returnValue | parentDefault() | 阻止默認行為 |
中文輸入法模式下的keyup事件 - IE:觸發keydown和keyup, 不觸發keypress. 能夠獲得輸入值。
Firefox:觸發keydown和keypress, 不觸發keyup. 輸入值未能獲得。在回車后會觸發keyup, 可獲得輸入值。
Opera:keydown, keypress和keyup都不觸發，輸入值也未能獲 鼠標滾輪事件IE為mousewheel,FF為‘DOMMouseScroll’.滾輪的滾動距離IE為event.wheelDelta,FF為event.detail,而且二者的方向相反,IE滾輪向下滾wheelDelta為負值 2.3 Dom - FF的body在body標簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在
- IE FF均支持parentNode,FF不支持parentElement
- FF不支持innerText,但有textContent
- DOM標準中Node無text和xml屬性
- IE會忽略由空白和換行組成的部分，而FF將其作為文本節點
- IE有一些非標準的、Mozilla 不支持的內容操作方法，包括檢索值、插入文本以及鄰近某個節點插入元素，比如 getAdjacentElement 和 insertAdjacentHTML
- IE和DOM標準的文檔片段處理方式不一樣
- document.write(),如果寫入的內容有腳本，FF會把字符串中的</script>解釋成外層<script>的結束標簽,需要將script標簽拆分，document.write(“<script>alert(‘hello)</”+“script>”);
- Table操作ie不允許使用tr的innerHTML賦值,包括tbody
2.4 XML - 空白 IE忽略 FF作為文本節點
- IE不支持節點類型的名稱常量,如NODE.ELEMENT_NODE，只支持數字.可以自定義 var NODE = {ELEMENT_NODE:1}
- XMLRequest 參考
- XML解析器 參考
- XPath 參考
- XSLT轉換 參考
2.5 Encode 2.6 CompatMode - 判別方法document.compatMode,頁面未聲明doctype時是backCompat,否則是CSS1Compat(IE8可能采用documentMode), FF不受CompatMode的影響,IE下可理解為IE5.5與IE6的區別
- 對JS的影響主要體現在clientWidth等屬性上,關于對象使用document.body(簡稱b)還是document.documentElement(簡稱de)。
- 窗口尺寸 FF下窗口高度(不包含滾動條)為b.clientHeight,包含滾動條FF下面沒有 兼容模式下窗口高度(不包含滾動條)為b.clientHeight,包含滾動條IE下則為b.offsetHeight| 標準模式下不包含滾動條IE下為de.clientHeight,包含滾動條IE下為de.offsetHeight
- 內容尺寸 HTML高度FF下b.scrollHeight和de.scrollHeight,BODY的高度為b.offsetHeight 兼容模式下HTML高度IE為b.scrollHeight,Body無 標準模式下HTML高度IE下為de.scrollHeight,Body高度為b.clientHeight|b.scrollHeight|b.offsetHeight
- 滾動位置 FF下b.scrollLeft 兼容模式下b.scrollLeft 標準模式下de.scrollLeft
2.7 css - height和width的單位 賦值時firefox需要加上單位px,IE可以不加
2.8 native [1,2,3,4,] IE下長度為5,firefox長度為4 {key1:‘value1’,key2:‘value2’,}最后一個逗號IE下報錯。 2004年，而getYear()在FF下得到104，IE下則得到2004,建議使用getFullYear()代替 使用for in操作Dom元素時，IE會先列出內置的屬性(沒有function)，再列出用戶自定義的方法和屬性，FF會先列出用戶自定義的屬性和方法,再列出內置的屬性和方法 2.9 selector - IE專有document.all(id), IE下id可直接獲取元素, Firefox 都不支持; 應統一使用document.getElementById(id);
- IE下id可直接獲取元素, 因此聲明變量時一律加上var;
- IE下獲取集合中子元素可使用[],(), Firefox不支持(); 應統一使用[]; document.form1.elements[name1]
- frames,forms,anchors等集合, IE下可通過id和name獲取， firefox支持name獲取， 可選方式， 使用name或者name和id保持一致
- 自定義屬性IE下可通過elem.attr和getAttribute來訪問， firefox支持后者，
- document.getElemsByName()IE下不能取得沒有name屬性的元素如div
2.10 窗口 - 窗口位置
- IE window.screenLeft,window.screenTop
- FF window.screenX windwo.screenY
- 窗口大小
- IE 未提供
- FF window.outerWidth window.outerHeight
- 視口大小 :: 顯示HTML頁的大小
- IE document.body.offsetWidth|document.body.offsetHeight
- FF window.innerWidth|window.innerHeight
2.11 大小寫 IE 對于部分屬性會忽略大小寫，但FF不會 比如screen.availWidth 2.12 頁面加載 頁面加載的過程有兩個事件，頁面完全加載的window.onload，可理解為頁面下載完成。另一個是dom準備完成事件，這時圖片等可能尚未下載完。如果需要盡早的執行js，可以利用以下方式，創建domReady方法 1 function _fi(){if(arguments.callee.dn)return;arguments.callee.dn=true;if(_timer)clearInterval(_timer);for(var i=0;i<onloadList.length;i++){onloadList[i].call(window)}};
2 if(document.addEventListener){document.addEventListener("DOMContentLoaded",_fi,false);}
3 4 5 6 7 if (/KHTML|WebKit/i.test(navigator.userAgent)){var _timer=setInterval(function(){if(/loaded|complete/.test(document.readyState)){_fi();}},10);}
8 window.οnlοad=_fi;
9 window.onloadList=[];
10 var domReady=function(fn){onloadList.push(fn);} mooltools內置了domready事件 1 window.addEvent('domready', function(){
2 alert('the dom is ready');
3 }); 2.13 剪貼板操作 1 function copyToClipboard(txt) {
2 if(window.clipboardData) {
3 window.clipboardData.clearData();
4 window.clipboardData.setData("Text", txt);
5 } else if(navigator.userAgent.indexOf("Opera") != -1) {
6 window.location = txt;
7 } else if (window.netscape) {
8 try {
9 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
10 } catch (e) {
11 alert("被瀏覽器拒絕！\n請在瀏覽器地址欄輸入'about:config'并回車\n然后將'signed.applets.codebase_principal_support'設置為'true'");
12 }
13 var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
14 if (!clip)
15 return;
16 var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
17 if (!trans)
18 return;
19 trans.addDataFlavor('text/unicode');
20 var str = new Object();
21 var len = new Object();
22 var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
23 var copytext = txt;
24 str.data = copytext;
25 trans.setTransferData("text/unicode",str,copytext.length*2);
26 var clipid = Components.interfaces.nsIClipboard;
27 if (!clip)
28 return false;
29 clip.setData(trans,null,clipid.kGlobalClipboard);
30 alert("復制成功！")
31 }
32 } 2.14 加入收藏夾 - IE :: window.external.AddFavorite(sURL, sTitle);
- FF :: window.sidebar.addPanel(sTitle, sURL, “”);
2.15 IE7的變化 1 window.opener = null;2 window.open("",'_self');3 window.close(); - 支持原生的XMLHTTP
- 支持postion:fixed 非常好的一個定位屬性(需要指定DocType為標準模式),使得元素相對于瀏覽器定位,固定元素在左上角、右下角之類的非常簡單。 標準模式下IE6也可通過以下方式模擬實現
1 2 3 4 5 6 7 2.16 firefox 3的變化 firefox 3.0起支持使用模式對話框 2.17 其它 |
