|
Javascript中的常見問題
1. 集合類對象問題 現(xiàn)有代碼中許多集合類對象取用時使用 ()，IE 能接受，F(xiàn)irefox 不能。 解決方法：改用 [] 作為下標(biāo)運算。如：document.forms("formName") 改為 Js代碼
document.forms["formName"];
//又如：
document.getElementsByName("inputName")(1);
//改為
document.getElementsByName("inputName")[1];
2. DIV對象 在 IE 中，DIV對象可以使用ID作為對象變量名直接使用。在 Firefox 中不能。 DivId.style.display = "none"; 解決方法：document.getElementById("DivId").style.display = "none"; ps:得對象的方法不管是不是DIV對象，都應(yīng)該使用getElementById方法。 3. 關(guān)于frame 現(xiàn)有問題：在 IE中 可以用window.testFrame取得該frame，mf中不行 解決方法：在frame的使用方面Firefox和IE的最主要的區(qū)別是： 如果在frame標(biāo)簽中書寫了以下屬性： 那么IE可以通過id或者name訪問這個frame對應(yīng)的window對象 而mf只可以通過name來訪問這個frame對應(yīng)的window對象 例如如果上述frame標(biāo)簽寫在最上層的window里面的htm里面，那么可以這樣訪問 IE： window.top.frameId或者window.top.frameName來訪問這個window對象 Firefox：只能這樣window.top.frameName來訪問這個window對象 另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標(biāo)簽 并且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內(nèi)容 也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內(nèi)容 4. 窗口 現(xiàn)有問題：IE中可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口，但是Firefox不支持。 解決辦法：直接使用window.open(pageURL,name,parameters)方式打開新窗口。 如果需要傳遞參數(shù)，可以使用frame或者iframe。 5. 在JS中定義各種對象變量名時，盡量使用id，避免使用name. 在 IE 中，HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 Firefox 中不能，所以在平常使用時請盡量使用id，避免只使用name，而不使用id。 6. document.all Firefox可以兼容document.all， 但會生成一條警告?？梢杂胓etElementById("*") 或者 getElementByTagName("*)來代替 不過對于document.all.length等屬性，則完全不兼容。大家盡量不要使用document.all屬性. 7. parentElement IE中支持使用parentElement和parentNode獲取父節(jié)點. 而Firefox只可以使用parentNode. 8. event W3C不支持windows.event 比方說,在IE里面: Js代碼
function onMenuClick(){
collapseMenu(event.srcElement);
}
工作正常。不過在Firefox中，則改成： Js代碼
function onMenuClick(evt){
if(evt == null)
evt = window.event; // For IE
var srcElement = evt.srcElement? evt.srcElement : evt.target;
// IE使用srcElement, 而Firefox使用target
collapseMenu(srcElement);
9. event.x 與 event.y 問題 在IE 中，event 對象有 x, y 屬性，F(xiàn)irefox中沒有。 解決方法: 在Firefox中，與event.x 等效的是 event.pageX。但event.pageX IE中沒有。 故采用 event.clientX 代替 event.x。在IE 中也有這個變量。 event.clientX 與 event.pageX 有微妙的差別（當(dāng)整個頁面有滾動條的時候）， 不過大多數(shù)時候是等效的。 如果要完全一樣，可以稍麻煩些： Js代碼
mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x 10. 用idName字符串取得對象的問題 在IE中，利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象，在Firefox中不能。 解決辦法:用 getElementById(idName) 代替 eval(idName). 14. nodeName 和 tagName 問題 在Firefox中，所有節(jié)點均有 nodeName 值，但 textNode 沒有 tagName 值。 在IE中nodeName 的使用有時會有問題。 解決方法： 使用 tagName，但應(yīng)檢測其是否為空。 15. input的type屬性 IE下 input.type屬性為只讀，但是Firefox下可以修改. 16. 自定義屬性 在mf中，自己定義的屬性必須getAttribute()取得 而IE可以直接通過"."運算符獲取. 17.const 問題 在 IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語法錯誤. 解決方法: 不使用 const ，以 var 代替. 18. body 對象 Firefox的body在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在. 19. img對象alt和title的解析 alt：當(dāng)照片不存在或者load錯誤時的提示, title：照片的tip說明, 在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照標(biāo)準(zhǔn)中的定義使用 在定義img對象時，最好將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用 20.childNodes獲取的節(jié)點 childNodes的下標(biāo)的含義在IE和Firefox中不同，F(xiàn)irefox使用DOM規(guī)范，childNodes中會插入空白文本節(jié)點。 獲取子節(jié)點時,一般可以通過node.getElementsByTagName()來回避這個問題。 21.removeNode() Firefox中節(jié)點沒有removeNode方法，必須使用如下方法 Js代碼
node.parentNode.removeChild(node); 22.innerText IE支持，F(xiàn)IREFOX不支持 FF中設(shè)置內(nèi)容文本是用textConent屬性. 23. XMLHTTP的區(qū)別 FireFox中的創(chuàng)建方法為: Js代碼
xmlhttp=new XMLHttpRequest() 而在IE中為: Js代碼
xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”) 24. img的src刷新問題 在IE 下可以用 可以刷新圖片，但在FireFox下不行。主要是緩存問題，在地址后面加個隨機數(shù)就解決了: Js代碼
myImg.src=this.src+’?'+Math.random(); 25. setAttribute()設(shè)置屬性問題 IE中很多屬性都不能用setAttribute進行設(shè)置,但Firefox中卻可以,如: Js代碼
theDiv.setAttribute('style','color:red');
//改為:
object.style.cssText = 'color:red;';
setAttribute('class','styleClass')
//改為:
setAttribute('className','styleClass');
obj.setAttribute('onclick','funcitonname();');
//改為:
obj.onclick=function(){fucntionname();};
...等等 ----------------------------------------------------------------------------------------- IE和FIREFOX在解析CSS方面的區(qū)別 1. 對高度的解析 IE：將根據(jù)內(nèi)容的高度變化，包括未定義高度的圖片內(nèi)容，即使定義了高度，當(dāng)內(nèi)容超過高度時，將使用實際高度 Firefox：沒有定義高度時，如果內(nèi)容中包括了圖片內(nèi)容，F(xiàn)irefox的高度解析是根據(jù)印刷標(biāo)準(zhǔn)，這樣就會造成和實際內(nèi)容高度不符合的情況；當(dāng)定義了高度，但是內(nèi)容超過高度時，內(nèi)容會超出定義的高度，但是區(qū)域使用的樣式不會變化，造成樣式錯位。 結(jié)論：大家在可以確定內(nèi)容高度的情況下最好定義高度，如果真的沒有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會出現(xiàn)混亂！ 3.布局問題 當(dāng)你在寫css的時候，特別是用float: left（或right）排列一竄圖片時，會發(fā)現(xiàn)在firefox里面正常而IE里面有問題。無論你用margin:0,還是border: 0來約束，都無濟于事。 其實這里還有另外一個問題，就是IE對于空格的處理，firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個div結(jié)束后要緊接著一個div寫，中間不要有回車或者空格。不然也許會有問題，比如3px的偏差，而且這個原因很難發(fā)現(xiàn)。 非常不走運的是我又碰到了這樣的問題，多個img標(biāo)簽連著，然后定義的float: left，希望這些圖片可以連起來。但是結(jié)果在firefox里面正常而IE里面顯示的每個img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒有作用。 后來的解決方法是在img外面套li，并且對li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產(chǎn)生很多錯誤問題，只有多多嘗試才能發(fā)現(xiàn)原因。 這只是一些簡單的區(qū)別,在做布局和CSS設(shè)計時候可以綜合考慮,但最為有效與簡單的解決兼容問題還是用TABLE表格,表格在兼容性方面有著不錯的表現(xiàn). 4.鼠標(biāo)樣式 firefox不支持hand，但ie支持pointer 解決方法: 統(tǒng)一使用pointer 5. padding 問題 padding 5px 4px 3px 1px FireFox無法解釋簡寫, 必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px; 6. 消除ul、ol等列表的縮進 消除ul、ol等列表的縮進樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px; 其中margin屬性對IE有效，padding屬性對FireFox有效 7. CSS透明 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 8. CSS圓角 IE：不支持圓角。 FF： -moz-border-radius:4px，或者 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;。 9. CSS雙線凹凸邊框 IE：border:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080; 10. 濾鏡 IE中支持使用濾鏡,而Firefox中不支持. 11. 禁止選取網(wǎng)頁內(nèi)容： 在IE中一般用js：obj.onselectstart=function(){return false;}; 而firefox用CSS:-moz-user-select:none; |
|
|
