1.HTMLオブジェクト取得の問題
FireFox：document.getElementById（ "idName"）;
ie：document.idnameまたはdocument.getElementById（ "idName"）。
解決策： document.getElementById（ "idName"）;を使用します。
2.constの問題
注：Firefoxでは、constキーワードまたはvarキーワードを使用して定数を定義
できますが、IEでは、varキーワードのみを使用して定数を定義できます。
解決策： varキーワードを使用して、定数を均一に定義します。
3.Event.xおよびevent.yの問題
説明：IEでは、イベントオブジェクトにはx、y属性がありますが、pageX、pageY属性はありません。Firefox
では、イベントオブジェクトにはpageX、pageY属性がありますが、x、y属性はありません。
解決策： mX（mX = event.x ？event.x：event.pageX;）IEの場合はevent.x、Firefoxの場合はevent.pageXの代わりに。
4.window.location.hrefの問題
注：IEまたは
Firefox2.0.xでは、window.locationまたはwindow.location.hrefを使用できます。Firefox1.5.xでは、window.locationのみを使用できます。
解決策： window.locationの代わりにwindow.locationを使用してください。 .href。
5.フレーム問題
例として次のフレームを取り上げます。
<framesrc = "xxx.html" id = "frameId" name = "frameName" />
（1）フレームオブジェクト
にアクセスします。IE：window.frameIdまたはwindow.frameNameを使用してこれにアクセスします。フレームオブジェクト。FrameIdとframeNameは同じ名前にすることができます。
Firefox：window.frameNameのみを使用して、このフレームオブジェクトにアクセスできます。
さらに、window.document.getElementById（ "frameId"）を使用して、IEとFirefoxの両方でこのフレームオブジェクトにアクセスできます。
（2）フレームコンテンツの切り替え：
In IEおよびFirefoxでは、window.document.getElementById（ "testFrame"）。src = "xxx.html"またはwindow.frameName.location = "xxx.html"を使用して、フレームのコンテンツを切り替える
ことができます。フレーム内のパラメータを返します親ウィンドウ（オープナーではなく親フレームであることに注意してください）、フレーム内の親を使用して親ウィンドウにアクセスできます。例：parent.document.form1.filename.value = "Aqing";
6.モーダルウィンドウと非モーダルウィンドウの問題
注：IEでは、モーダルウィンドウと非モーダルウィンドウは、FirefoxではなくshowModalDialogとshowModelessDialogを介して開くことができます。
解決策： window.open（pageURL、name、parameters）を直接使用して新しいウィンドウを開きます。
子ウィンドウのパラメーターを親ウィンドウに戻す必要がある場合は、子ウィンドウのwindow.openerを使用して親ウィンドウにアクセスできます。
例：var parWin = window.opener; parWin.document.getElementById（ " Aqing "）。value=" Aqing ";
7. FirefoxとIEの親要素（parentElement）の違い
IE：obj.parentElement
firefox：obj.parentNode
解決策： firefoxとIEの両方がDOMをサポートしているため、obj.parentNodeを使用することをお勧めします。
8. document.formName.item（” itemName”）问题
問題の説明：IEでは、document.formName.item（ "itemName"）またはdocument.formName.elements ["elementName"]を使用できます。Firefoxでは、document.formName.elements ["elementName"]のみを使用できます。
解決策： document.formName.elements ["elementName"]を均一に使用します。
9.コレクションオブジェクトの問題
問題の説明：IEでは、（）または[]を使用してコレクションオブジェクトを取得できます。Firefoxでは、[]を使用してコレクションオブジェクトを取得することしかできません。
解決策： []を均一に使用して、コレクションオブジェクトを取得します。
10.カスタム属性の問題
問題の説明：IEでは、一般属性を取得するメソッドを使用してカスタム属性を取得するか、getAttribute（）を使用してカスタム属性を取得できます。Firefoxでは、getAttribute（）のみを使用してカスタム属性を取得できます。
解決策：getAttribute（）を使用してカスタム属性を均一に取得します。
11.Input.type属性の問題
問題の説明：IEではinput.type属性は読み取り専用ですが、Firefoxではinput.type属性は読み取り/書き込みです。
解決策： input.type属性を変更しないでください。変更する必要がある場合は、最初に元の入力を非表示にしてから、同じ位置に新しい入力要素を挿入できます。
12.Event.srcElementの問題
問題の説明：IEでは、偶数オブジェクトにはsrcElement属性がありますが、ターゲット属性はありません。Firefoxでは、偶数オブジェクトにはターゲット属性がありますが、srcElement属性はありません。
解決策： srcObj = event.srcElement？event.srcElement：event.targetを
使用します。8番目の質問を検討する場合は、eventの代わりにmyEventを使用してください。
13.ボディローディングの問題
問題の説明：Firefoxのbodyオブジェクトは、bodyタグがブラウザーによって完全に読み取られる前に存在しますが、IEのbodyオブジェクトは、bodyタグがブラウザーによって完全に読み取られた後に存在する必要があります。
[注]この質問は実際には検証されておらず、検証後に変更されます。
[注]上記の問題はIE6、Opera9、FireFox2には存在しないことが確認されています。純粋なJSスクリプトは、要素がまだロードされていなくても、スクリプトの前にロードされたすべてのオブジェクトと要素にアクセスできます。
14.イベント委任方法
問題の説明：IEでは、document.body.οnlοad= injectを使用します。functioninject （）は以前に実装されています。Firefoxでは、document.body.οnlοad= inject（）;を使用します。
解決策： document.bodyを均一に使用します。οnlοad= newFunction（ 'inject（）'）;またはdocument.body.onload = function（）{/ *コードは次のとおりです* /}
[注]関数と関数の違い。
15.テーブル操作の問題
問題の説明：つまり、Firefoxと他のブラウザはテーブルタグに対して異なる操作をします。つまり、テーブルとtrのinnerHTMLに値を割り当てることは許可されていません。jsを使用してtrを追加する場合、appendChildメソッドはできません。作業。
解決策： //テーブルに空白行を追加します：
var row = otable.insertRow（-1）; var cell = document.createElement（ "td"）; cell.innerHTML = ""; cell.className = "XXXX"; row.appendChild（cell）; [注] JSを使用してテーブルを直接操作することはめったにないため、この問題は発生していません。JQueryなどのJSフレームワークセットを使用してテーブルを操作することをお勧めします。
16.オブジェクトの幅と高さの割り当ての問題
問題の説明：FireFoxのobj.style.height = imgObj.heightに類似したステートメントが無効です。
ØCSS
1.カーソル：手VSカーソル：ポインター
Firefoxは手をサポートしていませんが、つまりポインターをサポートしています。
解決策： ポインターを均一に使用する
2. innerTextはIEで正常に機能しますが、FireFoxでは機能しません。
解决方
法：
if（navigator.appName.indexOf（ "Explorer"）> -1）{ document.getElementById（ 'element'）。innerText = "my text"; } else { document.getElementById（ 'element'）。textContent = "my text"; }
3.CSSの透明性
IE：filter：progid：DXImageTransform.Microsoft.Alpha（style = 0、opacity = 60）。FF
：opacity：0.6。
4.cssの幅とパディング
幅には、IE7およびFFのパディングは含まれませんが、Ie6のパディングは含まれます。
5. FFモデルとIEBOXモデルの解釈に一貫性がないため、2pxの違いが生じます
box.style {width：100; border1px;}
つまり、box.width =
100ffとして理解されますbox.width = 100 + 1 * 2 = 102 // 2pxの境界線を追加します
解決策： div {margin：30px！important; margin：28px;}
これらの2つのマージンの順序を逆にしないでください。IEは！important属性を認識しませんが、他のブラウザーは認識できます。したがって、IEでは実際には次のように解釈されます。div{maring：30px; margin：28px}は
、最後のものに従って繰り返し定義および実行されるため、margin：XXpx！important;とだけ書くことはできません。
6.IE5とIE6のBOXの解釈に一貫性がない
IE5では、div {width：300px; margin：0 10px 0 10px;}
divの幅は300px-10px（右のパディング）-10px（左のパディング）として解釈され、最終的なdivの幅は280pxになります。 IE6およびその他のブラウザーでは、デバイスの上限幅は300px + 10px（右パディング）+ 10px（左パディング）= 320pxで計算されます。このとき、divを次のように変更できます：{width：300px！important; width / ** /：340px; margin：0 10px 0 10px}
7.ulリストとolリストのインデント
ul、ol、およびその他のリストのインデントを削除する場合、スタイルは次のように記述する必要があります。list-style：none; margin：0px; padding：0px;
IEでは、margin：0pxを設定すると上部が削除されることが確認されています。リストの下、左、右のインデントと空白リスト番号またはドットと同様に、パディングを設定してもスタイルには影響しません。Firefoxでは、margin：0pxを設定すると、上下の空白のみが削除され、パディングが設定されます。 ：0pxは、左右のインデントのみを削除できます。また、list-style：noneを設定する必要があります。リスト番号またはドットを削除します。つまり、IEではmargin：0pxのみを設定して最終的な効果を実現できますが、Firefoxではmargin：0px、padding：0px、list-style：noneを同時に設定して最終的な効果を実現する必要があります。
8.要素レベルのセンタリングの問題
FF：margin：0auto;
IE：親{text-align：center;}
9.Divの垂直方向のセンタリングの問題
vertical-align：middle;行間隔をDIV全体と同じ高さに増やします：line-height：200px;次にテキストを挿入すると、垂直方向の中央に配置されます。欠点は、ラップしないようにコンテンツを制御することです。
10. マージンを2倍にする問題
floatに設定されたdivのマージンは、ieの下で2倍になります。これはie6に存在するバグです。解決策は、display：inline;を追加することです。
例えば：
<divid =” imfloat”>
対応するcssは
#imfloat {
float：left;
margin：5px; / * IEでは10pxとして理解* /
display：inline; / * IEでは5pxとして理解* /}
11.IEと幅と高さの問題
IEはmin-の定義を認識しませんが、実際には、通常の幅と高さをminがあるかのように扱います。これは大きな問題です。幅と高さのみを使用する場合、これら2つの値は通常のブラウザでは変更されません。最小幅と最小高さのみを使用する場合、幅と高さはIEで設定されません。
たとえば、背景画像を設定する場合は、この幅の方が重要です。この問題を解決するには、次のようにします。
#box {幅：80px; 高さ：35px;} html> body #box {幅：自動;高さ：自動; 最小幅：80px; 最小-高さ：35px;}
12.ページの最小幅
前の質問と同様に、IEは最小値を認識しません。最小幅を実現するには、次の方法を使用できます。
#container {min-width：600px; width：expression（document.body.clientWidth <600？ "600px"： "auto"）;}
最初の最小幅は正常ですが、2行目の幅はJavascriptを使用します。これは、IEによってのみ認識されるため、HTMLドキュメントの形式が低下します。実際にJavascriptの判断で最小幅を実現しています。
13.DIVフローティングIEテキストが3ピクセルを生成するバグ
左側のオブジェクトは浮き、右側は外側のパッチの左マージンに配置され、右側のオブジェクト内のテキストは左から3pxのスペースになります。
#box {float：left; width：800px;}
#left {float：left; width：50％;}
#right {width：50％;}
* html #left {margin-right：-3px; //ここ句是関連键}
<div id = "box">
<div id = "left"> </ div>
<div id = "right"> </ div>
</ div>
14.IEの隠蔽とシークの問題
divアプリケーションが複雑な場合、各列にいくつかのリンクがあり、DIVのようにこの時点でかくれんぼの問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。
解決策：#layoutにline-height属性を使用するか、＃layoutに固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。
15.フロートdivを閉じます;フロートをクリアします;適応高さ
① 例：<div id = "floatA" > <div id = "floatB"> <div id = "NOTfloatC">
ここでのNOTfloatCは、パンを続行したくありませんが、行を下に移動したいと考えています。（floatAとfloatBの属性はfloat：left;に設定されています。）
このコードはIEでは問題ありません。問題はFFにあります。その理由は、NOTfloatCはfloatタグではなく、floatタグを閉じる必要があるためです。<divclass =” floatB”> <div class =” NOTfloatC”>の間に<div class =” clear ”>を追加します。このdivはその位置に注意を払う必要があり、float属性を持つ2つのdivと同じレベルである必要があります。ネスト関係はあり得ません。そうでない場合、例外が発生します。そして、クリアのスタイルを次のように定義します。.clear{clear：both;}
②divのデッドハイトを外部ラッパーとして設定しないでください。高さを適応させるには、overflow：hiddenを追加します。ボックスにfloatが含まれている場合、IEでは高さの適応は無効であり、この時点でIEをトリガーする必要があります。レイアウトのプライベート属性（邪悪なIE！）はzoom：1;で実行できるため、互換性が実現されます。
たとえば、特定のラッパーは次のように定義されます。
.colwrapper {overflow：hidden; ズーム：1; margin：5px auto;}
③組版の場合、最もよく使用するCSSの説明はfloat：leftです。n列のfloat divの背後に、次のように統一された背景を作成する必要がある場合があります。
<div id =” page”>
<div id =” left”> ＜/ div>
<div id =” center”> ＜/ div>
<div id =” right”> ＜/ div>
</ div>
たとえば、3つの列すべての背景色を青にするために、ページの背景を青に設定する必要がありますが、左中央右が下がると、ページは実際には同じ高さを維持し、問題が発生しています。理由は、ページがfloat属性ではなく、ページを中央に配置する必要があるため、ページをfloatに設定できないため、次のように解決する必要があります。
<div id =” page”>
<div id =” bg” style =” float：left; width：100％”>
<div id =” left”> ＜/ div>
<div id =” center”> ＜/ div>
<div id =” right”> ＜/ div>
</ div>
</ div>
次に、フロートを左に埋め込み、幅を100％DIVにして解決します。
④ユニバーサルフロートクロージャー（非常に重要！）
クリアフロートの原理については、[構造マークアップなしでフロートをクリアする方法]を参照してください。グローバルCSSに次のコードを追加し、閉じる必要のあるdivにclass = "clearfix"を追加します。
/ *修正をクリア* /
.clearfix：after {content： "。"; 表示ブロック; 高さ：0; クリア：両方;可視性：非表示; }
.clearfix {display：inline-block; }
/ *
IEMacから非表示* / .clearfix {display：block;}
/ * IEMac から非表示を終了* /
/ * clearfixの終了* /
または、次のように設定します。.hackbox{display：table; //オブジェクトをブロック要素レベルのテーブルとして表示する}
16.非常に不適切
高さの不適合は、特に内側のオブジェクトがマージンまたはパディングを使用している場合、内側のオブジェクトの高さが変更されたときに外側の高さを自動的に調整できないことを意味します。
例：
#box {}
#box p {margin-top：20px; margin-bottom：20px; text-align：center;}
<div id = "box">
<p>オブジェクト内のPコンテンツ</ p>
</ div >>
ソリューションスキル：Pオブジェクトの上下に2つの空のdivオブジェクトCSSコード{height：0px; overlay：hidden;}を追加するか、DIVにborder属性を追加します。
17. 下の画像の下にギャップがあるIE6は
このバグを解決する方法はたくさんあります。たとえば、htmlレイアウトを変更したり、imgをdisplay：blockに設定したり、vertical-align属性をvertical-align：top / bottom / middle / text-bottomに設定したりできます。
18. テキストをテキスト入力ボックスに揃えます
vertical-align：middleを追加します。
<style type = "text / css">
<！-
input {
width：200px;
高さ：30px;
border：1px黒一色;
vertical-align：middle;
}
->
</ style>
IEではどちらのバージョンも適用できないことが確認されていますが、ff、opera、safari、chromeはすべて問題ありません。
19. LIのコンテンツが長さを超えると、省略記号で表示されます
この手法はIE、Opera、safari、chromブラウザーに適用可能であり、FFは現在それをサポートしていません。
<style type = "text / css">
<！-
li {
width：200px;
空白：nowrap;
text-overflow：ellipsis;
-o-text-overflow：ellipsis;
オーバーフロー：非表示;
}
->
</ style>
20. IEがWeb標準でスクロールバーの色を設定できないのはなぜですか？
解決策は、bodyをhtmlに置き換えることです
<！DOCTYPEhtml PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv = " Content-Type "content =" text / html; charset = gb2312 "/>
<style type =" text / css ">
<！-
html {
scrollbar-face-color：＃f6f6f6;
スクロールバー-ハイライト-色：#fff;
scrollbar-shadow-color：#eeeeee;
scrollbar-3dlight-color：#eeeeee;
スクロールバー-矢印-色：＃000;
スクロールバー-トラック-色：#fff;
スクロールバー-darkshadow-color：#fff;
}
->
＜/スタイル>
21.高さが約1pxのコンテナを定義できないのはなぜですか
IE6でのこの問題は、デフォルトの行の高さが原因で発生し、多くの解決策があります。
例如：オーバーフロー：非表示ズーム：0.08行-高さ：1px
16.レイヤーをFLASHに表示するにはどうすればよいですか？
解決策は、フラッシュの透明度を設定することです
<paramname = "wmode" value = "transparent" />
22.リンク（タグ）の境界線と背景
a境界線と背景色でリンクするには、表示：ブロックを設定し、フロート：左を設定して改行がないようにする必要があります。メニューバー、aの高さの設定、およびメニューバーを参照して、下部ディスプレイのずれを回避します。高さが設定されていない場合は、メニューバーにスペースを挿入できます。
23.ハイパーリンクにアクセスした後、ホバースタイルが表示されない
クリックしてアクセスしたハイパーリンクスタイルは、ホバーしてアクティブではなくなりました。多くの人がこの問題に遭遇したはずです。解決策は、CSSプロパティの順序を変更することです：LVHA
コード：
<style type = "text / css">
<！-
a：link {}
a：visited {}
a：hover {}
a：active {}
->
</ style>
24.FORMラベル
IEでは、このタグは自動的にいくつかのマージンをマージンしますが、FFではマージンは0です。したがって、同じものを表示する場合は、マージンとパディングをcssで指定するのが最適です。上記の2つの問題については、私のcss In一般に、スタイルul、form {margin：0; padding：0;}が最初に使用されます。
25.属性セレクター（これは互換性がなく、cssを隠すバグです）
p [id] {} div [id] {}
これは、IE6.0およびIE6.0より前のバージョンでは非表示になり、FFおよびOPeraは機能します。属性セレクターとサブセレクターにはまだ違いがあります。サブセレクターの範囲はフォームから縮小され、属性の範囲は縮小されます。セレクターは比較的大きいです。、p [id]と同様に、idを持つすべてのpタグは同じです。
26.FFの下のテキストがコンテナの高さをサポートできないのはなぜですか
標準のブラウザで高さの値が固定されているコンテナは、IE6のように開かれません。次に、高さを固定したいのですが、開くことができるように設定するにはどうすればよいですか？方法は、高さ設定min-height：200pxを削除することです。ここでは、min-heightを認識しないIE6を処理するために、次のように定義できます。
{
height:auto!important;
height:200px;
min-height:200px;
}27. 入力は時間で大文字になります
onchangeは、フォーカスが失われるとトリガーされます。Oninputは中国語に出入りし、テキストが繰り返され、css大文字を使用し、フォーカスを失い、実際の値を大文字に設定します。
<input style="text-transform: uppercase" onchange="this.value=this.value.toUpperCase()" type="text" class="datainp carNo">28：モバイル端末開発のために追加する必要のあるコード
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no",maximum-scale=1, minimum-scale=1>29：1pxの境界線の問題
#ele:before{
content:'';
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
width: 200%;
height: 200%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}