js 部分
document.form.item 問題
代碼中存在 document.formName.item("itemName") 這樣的語句堡僻,不能在FF下運行
解決方法:
改用 document.formName.elements["elementName"]集合類對象問題
代碼中許多集合類對象取用時使用()除嘹,IE能接受鹃唯,F(xiàn)F不能
解決方法:
改用 [] 作為下標(biāo)運算焰盗,例:
document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]window.event
使用 window.event 無法在FF上運行
解決方法:
FF的 event 只能在事件發(fā)生的現(xiàn)場使用农曲,此問題暫無法解決膝宁【搁牛可以把 event 傳到函數(shù)里變通解決:
onMouseMove = "functionName(event)"
function functionName (e) {
e = e || window.event;
......
}HTML對象的 id 作為對象名的問題
在IE中蓖谢,HTML對象的 ID 可以作為 document 的下屬對象變量名直接使用捂蕴,在FF中不能
解決方法:
使用對象變量時全部用標(biāo)準(zhǔn)的 getElementById("idName")用 idName 字符串取得對象的問題
在IE中,利用 eval("idName") 可以取得 id 為 idName 的HTML對象闪幽,在FF中不能
解決方法:
用 getElementById("idName") 代替 eval("idName")變量名與某HTML對象 id 相同的問題
在FF中啥辨,因為對象 id 不作為HTML對象的名稱,所以可以使用與HTML對象 id 相同的變量名盯腌,IE中不能
解決方法:
在聲明變量時溉知,一律加上 var ,以避免歧義腕够,這樣在IE中亦可正常運行
最好不要取與HTML對象 id 相同的變量名级乍,以減少錯誤event.x 與 event.y 問題
在IE中,event 對象有x,y屬性帚湘,F(xiàn)F中沒有
解決方法:
在FF中玫荣,與 event.x 等效的是 event.pageX ,但event.pageX IE中沒有
故采用 event.clientX 代替 event.x 大诸,在IE中也有這個變量
event.clientX 與 event.pageX 有微妙的差別捅厂,就是滾動條
要完全一樣,可以這樣:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x關(guān)于frame
在IE中可以用 window.testFrame 取得該frame资柔,F(xiàn)F中不行
解決方法:
window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'取得元素的屬性
在FF中焙贷,自己定義的屬性必須 getAttribute() 取得在FF中沒有 parentElement,parement.children 而用 parentNode建邓,parentNode.childNodes
a.childNodes 的下標(biāo)的含義在IE和FF中不同盈厘,F(xiàn)F的 childNodes 中會插入空白文本節(jié)點
解決方法:
可以通過 node.getElementsByTagName() 來回避這個問題
b.當(dāng)html中節(jié)點缺失時,IE和FF對 parentNode 的解釋不同官边,例如:
<form>
<table>
<input/>
</table>
</form>
FF中 input.parentNode 的值為form沸手,而IE中 input.parentNode 的值為空節(jié)點
c.FF中節(jié)點自己沒有 removeNode 方法
解決方法:
必須使用如下方法 node.parentNode.removeChild(node)
const 問題
在IE中不能使用 const 關(guān)鍵字
解決方法:
以 var 代替body 對象
FF的 body 在 body 標(biāo)簽沒有被瀏覽器完全讀入之前就存在外遇,而IE則必須在 body 完全被讀入之后才存在
這會產(chǎn)生在IE下,文檔沒有載入完時契吉,在body上appendChild會出現(xiàn)空白頁面的問題
解決方法:
一切在body上插入節(jié)點的動作跳仿,全部在onload后進(jìn)行url encoding
一般FF無法識別js中的&
在js中如果書寫url就直接寫&不要寫&nodeName 和 tagName 問題
在FF中,所有節(jié)點均有 nodeName 值捐晶,但 textNode 沒有 tagName 值菲语,在IE中,nodeName 的使用有問題
解決方法:
使用 tagName惑灵,但應(yīng)檢測其是否為空元素屬性
IE下 input.type 屬性為只讀山上,但是FF下可以修改document.getElementsByName() 和 document.all[name] 的問題
在IE中,getElementsByName()英支、document.all[name] 均不能用來取得 div 元素
是否還有其它不能取的元素還不知道(這個問題還有爭議佩憾,還在研究中)調(diào)用子框架或者其它框架中的元素的問題
在IE中,可以用如下方法來取得子元素中的值
document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName
在FF中則需要改成如下形式來執(zhí)行干花,與IE兼容:
window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName對象寬高賦值問題
FireFox中類似 obj.style.height = imgObj.height 的語句無效
解決方法:
統(tǒng)一使用 obj.style.height = imgObj.height + "px";innerText的問題
innerText 在IE中能正常工作妄帘,但是 innerText 在FireFox中卻不行
解決方法:
在非IE瀏覽器中使用textContent代替innerTextevent.srcElement和event.toElement問題
IE下,even對象有srcElement屬性池凄,但是沒有target屬性抡驼;Firefox下,even對象有target屬性肿仑,但是沒有srcElement屬性
解決方法:
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;禁止選取網(wǎng)頁內(nèi)容
FF需要用CSS禁止致盟,IE用JS禁止
解決方法:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;捕獲事件
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);
}
23.//window.event
IE:有window.event對象
FF:沒有window.event對象柏副」窗睿可以通過給函數(shù)的參數(shù)傳遞event對象。如onmousemove=doMouseMove(event)
24.//鼠標(biāo)當(dāng)前坐標(biāo)
IE:event.x和event.y割择。
FF:event.pageX和event.pageY。
通用:兩者都有event.clientX和event.clientY屬性萎河。
25.//鼠標(biāo)當(dāng)前坐標(biāo)(加上滾動條滾過的距離)
IE:event.offsetX和event.offsetY荔泳。
FF:event.layerX和event.layerY。
26.//event.srcElement問題
說明:IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target. 請同時注意event的兼容性問題虐杯。
27.//event.toElement問題
問題:
IE下玛歌,even對象有srcElement屬性,但是沒有target屬性擎椰;Firefox下支子,even對象有target屬性,但是沒有srcElement屬性
解決方法:
var target = e.relatedTarget || e.toElement;
28.//標(biāo)簽的x和y的坐標(biāo)位置:style.posLeft 和 style.posTop
IE:有达舒。
FF:沒有值朋。
通用:object.offsetLeft 和 object.offsetTop叹侄。
29.//窗體的高度和寬度
IE:document.body.offsetWidth和document.body.offsetHeight。注意:此時頁面一定要有body標(biāo)簽昨登。
FF:window.innerWidth和window.innerHegiht趾代,以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用:document.body.clientWidth和document.body.clientHeight丰辣。
30;//添加事件
IE:element.attachEvent("onclick", function);撒强。
FF:element.addEventListener("click", function, true)。
通 用:element.onclick=function笙什。雖然都可以使用onclick事件飘哨,但是onclick和上面兩種方法的效果是不一樣的,onclick 只有執(zhí)行一個過程琐凭,而attachEvent和addEventListener執(zhí)行的是一個過程列表杖玲,也就是多個過程。例如:element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)這樣func1和func2都會被執(zhí)行淘正。
31.//標(biāo)簽的自定義屬性
IE:如果給標(biāo)簽div1定義了一個屬性value摆马,可以div1.value和div1["value"]取得該值。
FF:不能用div1.value和div1["value"]取鸿吆。
通用:div1.getAttribute("value")囤采。
32.//HTML 對象的 id 作為對象名的問題
(1)現(xiàn)有問題
在 IE 中,HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用惩淳。在 MF 中不能蕉毯。
(2)解決方法
用 getElementById("idName") 代替 idName 作為對象變量使用
33.//用idName字符串取得對象的問題
(1)現(xiàn)有問題
在IE中,利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象思犁,在MF 中不能代虾。
(2)解決方法
用 getElementById(idName) 代替 eval(idName)。
34.//變量名與某 HTML 對象 id 相同的問題
(1)現(xiàn)有問題
在 MF 中激蹲,因為對象 id 不作為 HTML 對象的名稱棉磨,所以可以使用與 HTML 對象 id 相同的變量名,IE 中不能学辱。
(2)解決方法
在聲明變量時乘瓤,一律加上 var ,以避免歧義策泣,這樣在 IE 中亦可正常運行衙傀。
此外,最好不要取與 HTML 對象 id 相同的變量名萨咕,以減少錯誤统抬。
35.//document.getElementsByName() 和 document.all[name] 的問題
現(xiàn)有問題:在 IE 中,getElementsByName()、document.all[name] 均不能用來取得 div 元素(是否還有其它不能取的元素還不知道)聪建。
//document.all
Firefox可以兼容document.all钙畔, 但會生成一條警告∽逼可以用getElementById("") 或者 getElementByTagName("")來代替
不過對于document.all.length等屬性刃鳄,則完全不兼容
36.//window.location.href問題
說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location
解決方法:使用window.location來代替window.location.href
37.//模態(tài)和非模態(tài)窗口問題
說明:IE下,可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口;Firefox下則不能
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。
如果需要將子窗口中的參數(shù)傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
38.//frame問題
以下面的frame為例:
<frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" />
(1)訪問frame對象:
IE:使用window.frameId或者window.frameName來訪問這個frame對象. frameId和frameName可以同名钱骂。
FF:只能使用window.frameName來訪問這個frame對象.
另外叔锐,在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.
(2)切換frame內(nèi)容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內(nèi)容.
如果需要將frame中的參數(shù)傳回父窗口(注意不是opener,而是parent frame),可以在frme中使用parent來訪問父窗口见秽。例如:window.parent.document.form1.filename.value="Aqing";
39.//事件委托方法
IE:document.body.onload = inject; //Function inject()在這之前已被實現(xiàn)
FF:document.body.onload = inject();
40.//firefox與IE的父元素(parentElement)的區(qū)別
IE:obj.parentElement
FF:obj.parentNode
解決方法: 因為FF與IE都支持DOM,因此使用obj.parentNode是不錯選擇
41.//innerText在IE中能正常工作愉烙,但是innerText在FireFox中卻不行. 需用textContent
42.//父節(jié)點、子節(jié)點和刪除節(jié)點
IE:parentElement解取、parement.children步责,element.romoveNode(true)。
FF:parentNode禀苦、parentNode.childNodes蔓肯,node.parentNode.removeChild(node)。
43.//對select的options集合操作
枚舉元素除了[]外振乏,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在兩種瀏覽器上使用蔗包。
注意在add后賦值元素,否則會失敗
動態(tài)刪除select中的所有options:
document.getElementById("ddlResourceType").options.length=0;
動態(tài)刪除select中的某一項option:
document.getElementById("ddlResourceType").options.remove(indx);
動態(tài)添加select中的項option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
IE FF 動態(tài)刪除通用方法:
document.getElementById("ddlResourceType").options[indx] = null;
44.//捕獲事件
問題:
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);
}
45.//畫圖
IE:VML调限。
FF:SVG。
46.//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;。
47.//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;裆装。
48.模態(tài)和非模態(tài)窗口問題
問題說明:IE下,可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口陪毡;Firefox下則不能米母。
解決方法:直接使用 window.open(pageURL,name,parameters) 方式打開新窗口。
如果需要將子窗口中的參數(shù)傳遞回父窗口毡琉,可以在子窗口中使用window.opener來訪問父窗口。如果需要父窗口控制子窗口的話妙色,使用 var subWindow = window.open(pageURL,name,parameters); 來獲得新開的窗口對象桅滋。
49.Table操作問題
問題說明:ie、firefox以及其它瀏覽器對于 table 標(biāo)簽的操作都各不相同,在ie中不允許對table和tr的innerHTML賦值丐谋,使用js增加一個tr時芍碧,使用appendChild方法也不管用。document.appendChild在往表里插入行時FIREFOX支持号俐,IE不支持
解決辦法:把行插入到TBODY中泌豆,不要直接插入到表
解決方法:
//向table追加一個空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[注] 建議使用JS框架集來操作table,如JQuery吏饿。
50.對象寬高賦值問題
問題說明:FireFox中類似 obj.style.height = imgObj.height 的語句無效踪危。
解決方法:統(tǒng)一使用 obj.style.height = imgObj.height + ‘px';
51.setAttribute('style','color:red;')
FIREFOX支持(除了IE,現(xiàn)在所有瀏覽器都支持)猪落,IE不支持
解決辦法:不用setAttribute('style','color:red')
而用object.style.cssText = ‘color:red;'(這寫法也有例外)
最好的辦法是上面種方法都用上贞远,萬無一失
52.類名設(shè)置
setAttribute('class','styleClass')
FIREFOX支持,IE不支持(指定屬性名為class笨忌,IE不會設(shè)置元素的class屬性蓝仲,相反只使用setAttribute時IE自動識CLASSNAME屬性)
解決辦法:
setAttribute('class','styleClass')
setAttribute('className','styleClass')
或者直接 object.className='styleClass';
IE和FF都支持object.className。
53.建立單選鈕
IE以外的瀏覽器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);
解決辦法:
這一點區(qū)別和前面的都不一樣官疲。這次完全不同袱结,所以找不到共同的辦法來解決,那么只有IF-ELSE了
萬幸的是途凫,IE可以識別出document的uniqueID屬性垢夹,別的瀏覽器都不可以識別出這一屬性。問題解決颖榜。
CSS部分
div類
居中問題
div里的內(nèi)容棚饵,IE默認(rèn)為居中,而FF默認(rèn)為左對齊
可以嘗試增加代碼margin:auto高度問題
兩上下排列或嵌套的div掩完,上面的div設(shè)置高度(height)噪漾,如果div里的實際內(nèi)容大于所設(shè)高度,在FF中會出現(xiàn)兩個div重疊的現(xiàn)象且蓬;但在IE中欣硼,下面的div會自動給上面的div讓出空間
所以為避免出現(xiàn)層的重疊,高度一定要控制恰當(dāng)恶阴,或者干脆不寫高度诈胜,讓他自動調(diào)節(jié),比較好的方法是 height:100%;
但當(dāng)這個div里面一級的元素都float了的時候冯事,則需要在div塊的最后焦匈,閉和前加一個沉底的空div,對應(yīng)CSS是:
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}clear:both;
不想受到float浮動的昵仅,就在div中寫入clear:both;IE浮動 margin 產(chǎn)生的雙倍距離
box {
float:left;
width:100px;
margin:0 0 0 100px; //這種情況之下IE會產(chǎn)生200px的距離
display:inline; //使浮動忽略
}
padding 問題
FF設(shè)置 padding 后缓熟,div會增加 height 和 width累魔,但I(xiàn)E不會 (* 標(biāo)準(zhǔn)的 XHTML1.0 定義 dtd 好像一致了)
高度控制恰當(dāng),或嘗試使用 height:100%;
寬度減少使用 padding
但根據(jù)實際經(jīng)驗够滑,一般FF和IE的 padding 不會有太大區(qū)別垦写,div 的實際寬 = width + padding ,所以div寫全 width 和 padding彰触,width 用實際想要的寬減去 padding 定義div嵌套時 y 軸上 padding 和 marign 的問題
FF里 y 軸上 子div 到 父div 的距離為 父padding + 子marign
IE里 y 軸上 子div 到 父div 的距離為 父padding 和 子marign 里大的一個
FF里 y 軸上 父padding=0 且 border=0 時梯投,子div 到 父div 的距離為0,子marign 作用到 父div 外面padding况毅,marign分蓖,height,width 的傻瓜式解決技巧
注意是技巧俭茧,不是方法:
寫好標(biāo)準(zhǔn)頭
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
高盡量用padding咆疗,慎用margin,height盡量補(bǔ)上100%母债,父級height有定值子級height不用100%午磁,子級全為浮動時底部補(bǔ)個空clear:both的div
寬盡量用margin,慎用padding毡们,width算準(zhǔn)實際要的減去padding
列表類
ul 標(biāo)簽在FF中默認(rèn)是有 padding 值的迅皇,而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}ul和ol列表縮進(jìn)問題
消除ul、ol等列表的縮進(jìn)時衙熔,樣式應(yīng)寫成: {list-style:none;margin:0px;padding:0px;}
顯示類
display:block,inline 兩個元素
display:block; //可以為內(nèi)嵌元素模擬為塊元素
display:inline; //實現(xiàn)同一行排列的的效果
display:table; //for FF,模擬table的效果
display:block 塊元素登颓,元素的特點是:
總是在新行上開始;
高度红氯,行高以及頂和底邊距都可控制框咙;
寬度缺省是它的容器的100%,除非設(shè)定一個寬度
<div>痢甘,<p>喇嘱,<h1>,<form>塞栅,<ul> 和 <li> 是塊元素的例子
display:inline 就是將元素顯示為行內(nèi)元素者铜,元素的特點是:和其他元素都在一行上;高放椰,行高及頂和底邊距不可改變作烟;寬度就是它的文字或圖片的寬度,不可改變砾医。<span>拿撩,<a>,<label>如蚜,<input>绷雏,<img>头滔,<strong> 和 <em> 是 inline 元素的例子鼠標(biāo)手指狀顯示
全部用標(biāo)準(zhǔn)的寫法 cursor: pointer;
背景怖亭、圖片類
background 顯示問題
全部注意補(bǔ)齊 width涎显,height 屬性背景透明問題
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好兩個都寫,并將opacity屬性放在下面