IEとFireFoxにおけるjsとcssの違いについての非常に良い記事【Caching Fireより転載】_体験交流

ブルーに関するこの記事を見ましたが、著者はそれをうまくまとめていると感じましたが、少なくともその一部は私にはよく理解できませんでした。本当はこれらのことをまとめるべきなのですが、残念ながら私は怠け者なので、自分自身の学習を促進するためにここにまとめました。

1.firefox は innerText をサポートできません。
Firefox は innerHTML をサポートしますが、innerText はサポートしません。innerText を実装するために textContent をサポートしますが、余分なスペースもデフォルトで保持されます。 textContent が使用されない場合、文字列に HTML コードが含まれていない場合は、代わりに innerHTML を使用できます。
2. Web コンテンツの選択を無効にします:
IE では通常、js が使用されます: obj.onselectstart=function(){return false;}
Firefox は CSS を使用します:- moz- user-select:none

3. フィルターのサポート (例: 透明フィルター):
IE:filter: alpha(opacity=10);
Firefox ： -moz-opacity:.10;

4. イベントのキャプチャ:
IE: obj.setCapture()、obj.releaseCapture()
Firefox: document.addEventListener ("mousemove",mousemovefunction,true);
Document.removeEventListener("mousemove",mousemovefunction,true);

5. マウスの位置を取得します:
IE :event.clientX、event.clientY
Firefox: イベント オブジェクトを渡すにはイベント関数が必要です
obj.onmousemove=function(ev){


6.境界の問題DIV などの要素を使用する場合:
例: div::{width:100px;height:100px;border:#000000 1px Solid; } の CSS の設定
IE の場合: div width (境界線の幅を含む): 100px、div 高さ (境界線の幅を含む): 100px;
および Firefox: div 幅 (境界線の幅を含む): 102px、div 高さ (境界線の幅を含む): 102px;

IE や Firefox と互換性のあるこのドラッグ ウィンドウを作成するときは、js と css の記述に頭を使う必要があります。ここで 2 つのヒントを紹介します。

1. ブラウザの種類を決定します。var isIE=document.all? true:false;
変数を書きました。document.all 構文をサポートしている場合は isIE=true、そうでない場合は isIE=false
2. 異なる環境での CSS 処理ブラウザ:
通常、! important を使用して CSS ステートメントの使用を優先できます (Firefox でのみサポート)
例: {border-width:0px! important;border- width:1px;}
この要素には Firefox では境界線がありませんが、IE では境界線の幅が 1 ピクセルです。


通常の条件下での XHTML と JS および CSS とのいくつかの違い

このコードをファイルの先頭に追加します。 Web ページは、いわゆる XHTML 標準す。 dtd">

XHTML 標準でのいくつかの違い:
1.document.documentElement と document.body
コード内でページの CSS を設定するときは、必ずこれを使用してください。document.documentElement
例: document.documentElement.style.overflow='hidden';
overflow-X、overflow-Y、これら 2 つの座標属性は XHTML ではサポートされていません;

2 .Document.documentElement Web ページのウィンドウ領域とスクロール バーの移動距離を取得するときにも使用する必要があります。
つまり、これら 4 つのプロパティ (clientWidth、clientHeight、scrollLeft、scrollTop) を使用する必要があります。 document.documentElement
ただし、 document.body.appendChild( ) と document.body.removeChild() は使用できますが、代わりに document.documentElement.appendChild() と document.documentElement.removeChild() を使用すると、エラーが報告されます。

要約すると、 clientWidth、documentElement は clientHeight、scrollLeft、scrollTop および document.documentElement.style にのみ使用されます。

3.この標準が追加された後、IE の境界線の問題も変更され、Firefox と一致するようになりました。これは、クロスブラウザ標準である XHTML の利点ですか?
前述のように:
div CSS の設定::{width:100px;height:100px;border:#000000 1px Solid;}
IE の場合 (通常の状況): div 幅 (境界線の幅を含む): 100px、div 高さ (境界線の幅を含む): 100px; Firefox (標準): div 幅 (境界線の幅を含む): 102px、div 高さ (境界線の幅を含む): 102px;

XHTML 標準を追加した後 (IE と Firefox の調整済み、^_^):
IE (XHTML): div 幅 (境界線幅を含む): 102px、div 高さ (境界線幅を含む): 102px;
Firefox (XHTML)::div 幅 (境界線幅を含む): 102px、div の高さ(境界線の幅を含む): 102px;