IEとFireFoxの互換性問題及び解決(zt)

元の住所:
http://hi.baidu.com/thinsoft/blog/item/9d159a1bdb6939f9ae513319.html
採用すべきです
Dcument.getElemenntByIdはIDでオブジェクトにアクセスし、一つのIDはページ内で唯一でなければならない。
Dcument.getElementsByTagName("div")[0]はラベルで名来を訪問します。
1.setAttribute（string name、string value）：名前と値を指定する新しい属性を追加するか、既存の属性を指定の値に設定する。
オブジェクトの属性を設定するには、次のようにします。

document.getElementById("apple").setAttribute("width","100") 
document.getElementsByTagName("div")[0].setAttribute("width","100") 

オブジェクトにアクセスする属性は、次のようになります。

document.getElementById("apple").getAttribute("width") 
document.getElementsByTagName("div")[0].getAttribute("width")

私たちは常にJavaScriptでElementに様々な属性を動的に追加する必要があります。これはset Attributeを使うことによって実現できます。これはブラウザの互換性に関わる問題です。

var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");

ここでsetAttributeでeのonclick属性を指定します。しかし、IEはサポートしていません。IEはsetAttributeという関数をサポートしていないわけではありません。
setAttributeで属性を設定することはサポートされていません。例えば、オブジェクト属性、集合属性、イベント属性、つまりsetAttributeでstyleとonclickの属性を設定します。
IEでは通じない。各種ブラウザに対応する効果を達成するために、Elementのオブジェクト属性、セット属性、イベント属性をポイント記号法で設定することができます。

document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick= function () { alert("This is a test!"); }

2、クラスとクラスについて
class属性はW 3 C DOMで重要な役割を果たしていますが、ブラウザの違いによってまだ存在します。set Attribute（「class」、v Name）文を使って動的に設定します。
Elementのクラス属性はfirefoxで通じていますが、IEではできません。IEカーネルのブラウザを使って「クラス」を知らないので、「クラスName」に変えます。
同様に、firefoxも「クラスName」を知らない。ですから、よく使われる方法は二つのものを兼ね備えています。
   

 element.setAttribute("class", vName);
     element.setAttribute("className", vName);    //for IE

IEの下でTABLEが新行に挿入できない問題について
IEの下TABLEはinnerHTMLでもapendChildでも効果がないのに対し、他のブラウザは正常に表示されています。彼を解決する方法は、次に示すように、TABLEの＜tbody＞要素にを加えることである。

var row = document.createElement("tr"); 
var cell = document.createElement("td"); 
var cell_text = document.createTextNode("      "); 
cell.appendChild(cell_text); 
row.appendChild(cell); 
document.getElementsByTagName("tbody")[0].appendChild(row);

window.イベント
IE：window.eventオブジェクトがあります。
FF：window.event対象がありません。イベントオブジェクトは関数のパラメータによって伝達されます。onmousemove=domousemove(イベント)
マウスの現在の座標
IE：event.xとevent.y。
FF：event.pageXとevent.pageY。
共通：両方とも、event.client Xとevent.client Y属性があります。
マウスの現在の座標(スクロールバーのスクロール距離を加える)
IE：event.offsetXとevent.offsetY。
FF：event.layerXとevent.layerY。
ラベルのxとyの座標位置：style.posLeftとstyle.pos Top
IE：あります
FF：ありません
汎用：object.offset Leftとobject.offset Top。
フォームの高さと幅
IE:document.body.offset Widthとdocument.body.offset Height。注意：このページには必ずbodyタグが必要です。
FF：window.inner Widthとwindow.inner Hegit、およびdocument.document Element.client Widthとdocument.document.document Element.clint Height。
通用：Dcument.body.clientWidthとdocument.body.clientHeight。
イベントを追加
IE：element.atachEvent（“onclick”、func）；
FF：element.addEvent Listener（「click」、func、true）。
通用：element.onclick=func。Oclickイベントは全部利用できますが、Oclickと上の2つの方法の効果は違っています。Oclickは一つのプロセスを実行するだけで、atachEventとaddEventListenerは一つのプロセスリスト、つまり複数のプロセスを実行します。たとえば:

element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)

このようにFnc 1とFnc 2はいずれも実行されます。
ラベルのカスタム属性
IE：タグdiv 1に属性valueを定義すれば、div 1.valueとdiv 1[value]はこの値を取得することができます。
FF：div 1.valueとdiv 1[value]では取れません。
汎用：div 1.getAttribute（「value」）。
親ノードとサブノードと削除ノード
IE：parentElement、parement.children、element.romoveNode。
FF：parent Node、parent Node.childNodes、node.parent Node.removeChild。
CSS：透明
IE:filter:progid:DXImageTrans form.Microsoft.Alpha(style=0,opacity=60)
FF:opacity:0.6
CSSのSTYLEを設定します

document.getElementById('look').style.cssText="display:none;";//  
document.getElementById('look').setAttribute("style","display:none;");//firefox