JS、CSS兼容性問題的幾點總結

javascript和CSS在不一樣瀏覽器下的兼容性問題的幾點總結：

Javascript部分

一、 document.form.item 問題
問題：
代碼中存在 document.formName.item("itemName") 這樣的語句，不能在FF下運行
解決方法：
改用 document.formName.elements["elementName"]

二、 集合類對象問題
問題：
代碼中許多集合類對象取用時使用()，IE能接受，FF不能
解決方法：
改用 [] 做爲下標運算，例：
document.getElementsByName("inputName")(1) 改成 document.getElementsByName("inputName")[1]

三、 window.event
問題：
使用 window.event 沒法在FF上運行
解決方法：
FF的 event 只能在事件發生的現場使用，此問題暫沒法解決。能夠把 event 傳到函數裏變通解決：
onMouseMove = "functionName(event)"
function functionName (e) {
    e = e || window.event;
    ......
}

四、 HTML對象的 id 做爲對象名的問題
問題：
在IE中，HTML對象的 ID 能夠做爲 document 的下屬對象變量名直接使用，在FF中不能
解決方法：
使用對象變量時所有用標準的 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屬性，FF中沒有
解決方法：
在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

八、 關於frame 
問題：
在IE中能夠用 window.testFrame 取得該frame，FF中不行
解決方法：
window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'

九、 取得元素的屬性
在FF中，本身定義的屬性必須 getAttribute() 取得

十、 在FF中沒有 parentElement，parement.children 而用 parentNode，parentNode.childNodes 
問題：
childNodes 的下標的含義在IE和FF中不一樣，FF的 childNodes 中會插入空白文本節點
解決方法：
能夠經過 node.getElementsByTagName() 來回避這個問題
問題：
當html中節點缺失時，IE和FF對 parentNode 的解釋不一樣，例如：
<form>
<table>
<input/>
</table>
</form>
FF中 input.parentNode 的值爲form，而IE中 input.parentNode 的值爲空節點
問題：
FF中節點本身沒有 removeNode 方法
解決方法：
必須使用以下方法 node.parentNode.removeChild(node)

十一、 const 問題
問題：
在IE中不能使用 const 關鍵字
解決方法：
以 var 代替

十二、 body 對象 
FF的 body 在 body 標籤沒有被瀏覽器徹底讀入以前就存在，而IE則必須在 body 徹底被讀入以後才存在
這會產生在IE下，文檔沒有載入完時，在body上appendChild會出現空白頁面的問題
解決方法：
一切在body上插入節點的動做，所有在onload後進行

1三、 url encoding 
問題：
通常FF沒法識別js中的&
解決方法：
在js中若是書寫url就直接寫&不要寫&

1四、 nodeName 和 tagName 問題 
問題：
在FF中，全部節點均有 nodeName 值，但 textNode 沒有 tagName 值，在IE中，nodeName 的使用有問題
解決方法：
使用 tagName，但應檢測其是否爲空

1五、 元素屬性
IE下 input.type 屬性爲只讀，可是FF下能夠修改

1六、 document.getElementsByName() 和 document.all[name] 的問題
問題：
在IE中，getElementsByName()、document.all[name] 均不能用來取得 div 元素
是否還有其它不能取的元素還不知道（這個問題還有爭議，還在研究中）

1七、 調用子框架或者其它框架中的元素的問題 
在IE中，能夠用以下方法來取得子元素中的值
document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName
在FF中則須要改爲以下形式來執行，與IE兼容：
window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName

1八、 對象寬高賦值問題 
問題：
FireFox中相似 obj.style.height = imgObj.height 的語句無效
解決方法：
統一使用 obj.style.height = imgObj.height + "px";

1九、 innerText的問題 
問題：
innerText 在IE中能正常工做，可是 innerText 在FireFox中卻不行
解決方法：
在非IE瀏覽器中使用textContent代替innerText

20、 event.srcElement和event.toElement問題 
問題：
IE下，even對象有srcElement屬性，可是沒有target屬性；Firefox下，even對象有target屬性，可是沒有srcElement屬性
解決方法：
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;

2一、 禁止選取網頁內容 
問題：
FF須要用CSS禁止，IE用JS禁止
解決方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

2二、 捕獲事件 
問題：
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);
}

 

CSS部分

div類

一、 居中問題 
div裏的內容，IE默認爲居中，而FF默認爲左對齊
能夠嘗試增長代碼margin:auto

二、 高度問題 
兩上下排列或嵌套的div，上面的div設置高度(height)，若是div裏的實際內容大於所設高度，在FF中會出現兩個div重疊的現象；但在IE中，下面的div會自動給上面的div讓出空間
因此爲避免出現層的重疊，高度必定要控制恰當，或者乾脆不寫高度，讓他自動調節，比較好的方法是 height:100%;
但當這個div裏面一級的元素都float了的時候，則須要在div塊的最後，閉和前加一個沉底的空div，對應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 產生的雙倍距離 
#box {
float:left;
width:100px;
margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離
display:inline; //使浮動忽略
}

五、 padding 問題 
FF設置 padding 後，div會增長 height 和 width，但IE不會 （* 標準的 XHTML1.0 定義 dtd 好像一致了）
高度控制恰當，或嘗試使用 height:100%;
寬度減小使用 padding
但根據實際經驗，通常FF和IE的 padding 不會有太大區別，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 的傻瓜式解決技巧 
注意是技巧，不是方法：
寫好標準頭
<!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儘可能補上100%，父級height有定值子級height不用100%，子級全爲浮動時底部補個空clear:both的div
寬儘可能用margin，慎用padding，width算準實際要的減去padding

 

列表類

一、 ul 標籤在FF中默認是有 padding 值的，而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}

二、 ul和ol列表縮進問題 
消除ul、ol等列表的縮進時，樣式應寫成: {list-style:none;margin:0px;padding:0px;}

 

顯示類

一、 display:block,inline 兩個元素
display:block; //能夠爲內嵌元素模擬爲塊元素
display:inline; //實現同一行排列的的效果
display:table; //for FF,模擬table的效果
display:block 塊元素，元素的特色是：
老是在新行上開始；
高度，行高以及頂和底邊距均可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是塊元素的例子
display:inline 就是將元素顯示爲行內元素，元素的特色是：
和其餘元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

二、 鼠標手指狀顯示
所有用標準的寫法 cursor: pointer;

 

背景、圖片類

一、 background 顯示問題
所有注意補齊 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屬性放在下面