web-dev-qa-db-ja.com

クロスブラウザのどのような問題に直面しましたか？

複数のブラウザーセット用に開発しているときに、ブラウザーの実装の違いにより、開発中にどのような問題に直面しましたか？

始めに、私が直面したもののいくつかをリストしています：

  • Firefoxのテキストノードは4Kデータのみを許可します。したがって、XML Ajax応答は、1つのノードだけではなく、複数のテキストの子ノードに分割されます。 Internet Explorerでは問題ありません。 Firefoxの場合、完全なデータを取得するには、node.firstChildを呼び出す前にnode.normalizeを使用するか、node.textContentを使用する必要があります。どちらもMozilla固有のメソッドです
  • Internet Explorerは またはHTML文字コード160を置き換えません。Unicodeに相当する\ u00a0を置き換える必要があります
  • Firefoxでは、フォーム内に動的に作成された入力フィールド（document.createElementを使用して作成された）は、フォーム送信時にその値を渡しません。
  • internet Explorerのdocument.getElementByIdは、要素名が一致しても要素を返します。 Mozillaは、idが一致する場合にのみ要素を返します。
  • Internet Explorerでは、選択ボックスにどのオプションでも表されていない値がある場合、空白が表示され、Firefoxは最初のオプションを表示します。
javascriptcssdomcross-browser
64
Navneet

私が抱えている問題のほとんどはIE、特にIE6にあります。私が個人的に対処した問題は、印象的な印象を残しました（順不同）。

  • フレームワークを使用して基本的なことを行う必要があるのは、各ブラウザーがDOMを少しずつ実装しているためです。これは、IEとAJAXで特に厄介です。AJAXでは、呼び出しを開始するために複数のifブロックが必要です。理想的な世界では、基本的なことを行うためのフレームワークがなくてもJavaScriptで作業できます。

  • IEのselectのonChangeは正しく実装されておらず、selectがフォーカスを失う前に発生します（これは正しくありません）。つまり、キーボードのみのユーザーはこの実装の問題によって機能しなくなるため、IEによる選択でonChangeを使用することはできません。

  • あなたはあなたの投稿でそれについて言及しましたが、getElementById（）を使用するときにIEが名前で要素を取得するとき、それは大きな痛みです。

  • RTLロケール（アラビア語、ヘブライ語など）の場合、Firefoxは「text-align：right;」を実装します間違って。コンテナが何らかの理由でオーバーフローした場合、テキストはコンテナ自体の右側ではなく、表示可能なコンテナの右側に揃えられます（コンテナの一部が非表示になっていても）。

  • 配列やオブジェクトを終了する方法に関して、ブラウザによって選り好みのレベルが異なります。たとえば、Firefoxは[item0、item1、] "のような配列で大丈夫です。ただし、この同じコードは、末尾のコンマを嫌うのでOpera barfになります。IEは、3番目の項目が未定義の配列を3項目の配列にします！これは確かに悪いコードですが、動的に生成されたjavascriptがあります。これはうまくいきました。

  • IEの hasLayout に関係するすべてのこと。特にこの属性が存在することを知らなかった場合、この属性を中心にひどい痛みが生じました。ハックを使用してhasLayoutを追加することにより、多くの問題が修正されました。ハッキングの結果、さらに多くの問題が発生しました。

  • IEのフロートは、期待どおりに動作することはほとんどありません。他のブラウザでは煩わしい傾向がありますが、少なくとも特定の動作に適合しています。 ;）

  • IEが リストアイテム間の余分な空白 を追加しても、YUIがメニューを作成するためにリストを使用するため、苦痛は終わりません。 （問題を完全に把握するには、そのリンクをIEと別のブラウザーで並べて表示する必要があります。）

  • IEでテキストをコンテナに入れないようにするのに多くの問題があります。他のブラウザは、「white-space：nowrap」をよりよくリッスンします。これは、サイズ変更可能なサイドバーを持つ作業中のUIの問題でした。 IEでは、サイズを変更しすぎるとサイドバー項目が折り返され始めます。

  • IE6には多くのCSSセレクタータイプがないため、必要以上にDOMをクラスアップする必要があります。たとえば、+ 、: hover、：first-childの欠如。

  • 異なるブラウザは、空のテキストノードを異なる方法で処理します。具体的には、OperaでDOMを走査するとき、ノードの子を参照するときに空のテキストノードを心配する必要があります。特定のアイテムを探している場合、これは問題ではありませんが、特定の入力を期待するコードを記述している場合と、ブラウザーがその入力を表示する方法が異なる場合です。

  • IE6では、javascriptを使用してiframeを動的に生成すると、iframeがコンテナを自動的にいっぱいにしないことがあります（幅と高さが最大に設定されている場合でも）。私はまだこの問題を解決する方法を知りません、そしてそれについて質問を投稿することを考えています。

  • IEでは、<tbody>要素にオーバーフローCSSを設定できません。これは、スクロール可能なテーブル（具体的な<thead>と<tfoot>を使用）を簡単な方法で作成することは不可能であることを意味します。

（私にとっては）Web開発の最悪の部分はクロスブラウザーの問題であるため、このリストに後でさらに追加するでしょう。また、これらの問題は無限であるため、「後でこのリストに追加する可能性が高い」を編集することはできません。 :)

21
Daniel Lew

reallyが私にたった一つだけ：

問題自体に興味がある場合、 QuirksMode.org は、クライアント側のライブラリに飛躍する前に私が毎日使用していた素晴らしいリソースです。また、John Resigの DOMはyahooのMess プレゼンテーションであり、クロスブラウザトピックを効率的に処理する方法について多くの理論を提供しています。

ただし、単にそれらを解決することに興味がある場合、あなたの質問は、多くの人が jQuery 、 YahooUI 、 MooTools 、 Dojo など。活気のあるコミュニティでは、才能ある人々とそのような企業支援プロジェクトにより、むしろアプリに集中できます。これらの問題より。

以下に、ブラウザ間のフラストレーションの多くを回避し、これらすべてを実際に行うことができるjQueryの例を示します。

クロスブラウザマウスクリックバインディング

$('#select anything + you[want=using] ~ css:selectors').click(
    function(){ 
       alert('hi');
    }
);

クロスブラウザHTMLインジェクション

$('#anElementWithThisId').html('<span>anything you want</span>');

クロスブラウザAjax（すべてのリクエストオブジェクトは まだ利用可能 です）

$('p.message').load('/folder/file.html');

そして本当に驚いたことは、セレクターでデータのサブセットをロードすることです（詳細については manual を参照してください）

$('p.message').load('/folder/file.html body p:first-child');

さて、これらすべてが本当に楽しくなり始めた：メソッドを一緒に連鎖する

$('ul.menu a').click(           // bind click event to all matched objects
  function(evt){                // stnd event object is the first parameter
    evt.preventDefault();       // method is cross-browser thx to jquery
    $(this)                     // this = the clicked 'a' tag, like raw js
      .addClass('selected')     // add a 'selected' css class to it
      .closest('ul.menu')       // climb the dom tree back up to the ul
      .find('a.selected')       // find any existing selected dom children
      .not(this)                // filter out this element from matches
      .removeClass('selected'); // remove 'selected' css class
  }
)

Joelの Can Your Programming Language Do This？ の記事を思い出させます。

これらすべてを理論レベルに引き上げると、真の進歩は意識的な思考と努力でできることからではなく、自動的に（思考や努力なしで）できることからもたらされます。 Joelは[Smart And Gets Things Done]でこれに関するセグメントを持っています。質問とスマートな開発者へのインタビューに関して、プログラミングに対する私のアプローチを完全に変えました。

彼女はすべての鍵を知っているので音楽をただ「演奏」できるピアニストと同様に、あなたの進歩は思考を必要とするより多くのことをすることからではなく、思考を必要としないより多くのことをすることから来ます。そうすれば、目標はすべての基本を簡単にできるようになります。

クライアント側のライブラリは、ある意味で、それを実現するのに役立ちます。 ;）

40
Matt Gardner

IE6？えーあなたたちはそれを手に入れました簡単！ Netscape 4でCSSレイアウトを機能させる必要はありませんでした（ブラウザー全体をクラッシュさせることなく）。テーブルをサポートしないアプライアンスブラウザ用に記述する必要はありませんか？ IE Mobile？を書く必要はありませんでした。

  • javaScriptが割り当てたイベントハンドラーはサポートされていません。 innerHTMLで「onclick = "somestring"」を設定することによってのみイベントハンドラを記述できます。

  • 最も基本的なDOMレベル1プロパティ（nodeName、nodeType、nodeValue、firstChild、lastChild、nextSibling、previousSibling、data、value、HTMLElement.getElementsByTagName、すべてのHTMLTableElementメンバー、ほとんどのCSSStyleDeclarationメンバー）は単に存在しません。

  • ほとんどのCSSレイアウトプロパティは機能しません。 「幅」などの単純なCSSプロパティの多くは、フォームフィールドなどの一部の要素では機能しません。

  • テーブルやフォームフィールドなどの要素に他の多くのCSSプロパティを設定すると、インスタントブラウザーがハングします。WindowsMo​​bileにはタスクマネージャーが組み込まれていないため、デバイスをソフトリセットする必要があります。

  • ああ、<button>内にテキスト以外のものを置くこともinsta-crashです。

  • netscape 2（！）にまで遡る、基本的なJavaScriptメソッドと「DOMレベル0」メソッドの巨大なチャンクが欠落しています。

そして、これは2009年のMicrosoftの主力Windows Mobileブラウザの最新リリースです。

確かに、XMLHttpRequestをサポートしていますが、CSSとスクリプトのサポートがIE3（！）未満のブラウザーでAJAXコードを記述すると、奇妙な統合失調症で作業しているように、世紀および19世紀の技術。

お勧めしません。

10
bobince

最大のクロスブラウザの問題？ -Internet Explorer！

<start_grumpy>

IEはsolely「ウェブを控える」責任があります-開発者はHTML5またはSVGを使用して素晴らしいサイトを作成できません、またはXFORMS、またはCANVAS ...は、Firefox、Safari、またはChromeのせいではなく、インターネットの2/3がまだIEで止まっているためです。言うまでもなく、Webの約20％がIE6に残っています。 IE8は、少なくともtryに準拠するIEの最初のバージョンです（2001年の標準） 、つまり、少なくとも2018になってから、IE7のすべてのサポートをやめることができます。

</ start_grumpy>

それ以外の場合は、IEが完全にサポートするDOMメソッドに名前を付けます...これが答えるのが難しい質問であるという事実は、CrossBrowserの最大の問題です。

getElementById() - badly broken
getElementsByName() - buggy
getElementsByTagName() - buggy
getAttribute() - buggy
setAttribute() - majorly broken
createElement() - buggy
appendChild() - buggy

IEが発明したものでさえも台無しにしています...

innerHTML (getting) - returns the worst markup possible
innerHTML (setting) - doesn't work on the elements you'd want to dump a bunch of data into (e.g. Tables and Selects)
5
scunliffe

多くの問題を抱えるにはあまりにも長い間これを行ってきましたが、それでも私は、display：table、：last-child、：hoverのようなCSSに対するIEの非サポートをハックする必要があるという気がします。

すべてのIEものはまだ正気ではないが、それはただ背景の狂気今:)

5
annakata

Internet Explorer（注：必ずしもバージョン9/10 +ではないIEの古いバージョン）では、document.createElementを使用してフォーム要素を作成すると、フィールドはフォームと共に送信されません。唯一の回避策は使用することです

element.innerHTML = "<input type='text' value="+val+" name="+name+">";
3
tj111

Webアプリのシステムテストフレームワークの開発中に、クリックなどのさまざまなイベントをシミュレートする必要がありました。 IEとFFでそれを行う通常の方法を見つけることができず、多くのブードゥー教で2つの異なる方法でそれを実装しなければならなかったことを覚えています。

詳細は覚えていませんが、本当に面倒だったことを覚えています。

3
Untrots

これ 、基本的に。

最新のjavascriptフレームワーク（jQuery、プロトタイプなど）は、多くのブラウザーで一度にコードを動作させることに驚異をもたらしました。

私が今抱えている最大の問題は、あらゆる種類のリッチUIの動作が驚くほど遅いことです。 IE7は悪いです。 IE6はさらに悪いです。 IE8はバグが多く、半分は終了しており、IE7よりも優れています。

最悪なのは、IE6がなくなることはないと思うことです。それはとても遍在し、とても気まぐれでした。たくさんの「エンタープライズ」（つまり、ある大企業が別の大企業のために作った大きなWebアプリ）アプリケーションは、IE7でも動作しない、非常に特殊なIE6 javascriptを使用していました。

企業はこれらのアプリを完全に置き換えることはできません。新しいアプリを販売しようとしているため、IE6のサポートは必須です。クレジットクランチ企業がコストを削減する現在の状況では、2015年もIE6をサポートし続けると思います:-(

3
Keith

IEでは、選択オプション要素を非表示にすることはできず、選択要素自体のみを非表示にすることができます。これにより、JavaScriptを使用して選択オプションの内容を動的に変更することが難しくなります。

この問題は、SafariおよびChromeにも存在します。

IEには他にも多くの問題がありますが、これが最近、私に最も大きな不満を引き起こしています。

2
BacMan

フォームを処理する際のCSSボックスモデルの不整合。特に、各ブラウザが<select>ボックスをどのように処理するかがいらいらします。

1
Paulo

私の唯一の悪夢は、常にハックを探すべきIE6ですが、問題に直面するたびに、あなたの前でそれに遭遇し、それについてブログを書いた人がいます（そして、私たちはそれから逃れることはありません）

1
Hannoun Yassir

要素に与えられたサイズは、公式仕様で説明されているコンテンツボックスだけでなく、IE5のようなsize + padding + borderであると考える人によって書かれたCSSレイアウトに取り組んでいました。それはほんの数ヶ月前に書かれたので、彼はIE7で見栄えを良くするために汚いハックをしました。 FireBugを使用して問題の原因を突き止めるのに数時間かかりましたが、気づいたときには本当にイライラしていました。

FirefoxでIE5向けに記述された「フローティング」CSSでサイトを開くと、ボックスにページが収まり、ページに収まるだけの十分なスペースがありません。 IE7で開くと、IE7で境界線が重なるので見栄えがよくなるため、見た目はほぼ正しいように見えます。私のように経験の浅い人にとっては、注意するのは困難でした。

1
Muxecoid

厄介なIE表示の問題を支援する簡単な方法は、firebugを使用することです。IE 6/7/8を使用するだけで Firebug Lite

以下をブックマークとして追加し、ツールバーに貼り付けると、ワンクリックですべてのWebページからfirebug liteが有効になります。 （IEでこれを確認するだけで問題ありません。）

javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
1
TheAlbear

私の最大の問題はブラウザメーカーです。 rog慢な小さな* ^＆％s。つまり、誰にもブラウザを販売することはできませんが、誰もが小さなコーナーでお互いにやり取りしようとしており、分裂を生み出しているだけです。ああ、Chrome。 Chrome SafariかFirefoxかはまだわからない。1つのパーラートリックは別として、それは実質的に役に立たない。あなたが独占を嫌っているという理由だけでグーグルを続けている皆さんを非難する。今、私たちは皆、二流の、時期尚早に発売されたソフトウェアを楽しむことができます。

これは主にバグに起因します* Chrome今日、私はブラウザを照会することについて私に夜明けしませんでした。SafariとChromeは失敗したので、私は考えましたちょっと、Safariの問題を修正したら、Chromeは自動的に修正されますが、そうではありません。氏は「個別のプロセスでタブを実行します」、別名「Sr.実装が気が遠くなるようなトカゲロックの私。

Firefoxも嫌いです。ウイルスの感染があるのか​​、Firebugが実行されているのかわかりません。 AdobeがFlashを映画クリップ以外の用途に実用的なブラウザをリリースすることを決定するまで、私は長い間めちゃくちゃになるでしょう。そして、私たちは皆、それが人生のすべてであることを知っています。

また、脳みそを動かしているとんでもないバグに遭遇したときのみ、プログラミングを楽しんでいます。

1
novatv.stdios

Firefoxの場合、完全なデータを取得するには、node.firstChildを呼び出す前にnode.normalizeを使用するか、node.textContentを使用する必要があります。どちらもMozilla固有のメソッドです

実際、これらはすべて、大部分のブラウザーでサポートされているW3C DOMメソッドです。 IEでも動作することがわかると思います。

ブラウザー間の最大の問題は、IEをまだ使用している人がいることです。

2番目に大きいのは、標準に準拠したブラウザーでも、CSSでいくつかの処理を実行することはまだ不可能だということです。例えば ​​tbody {overflow:auto}はGecko以外では何の役にも立ちませんし、バグもあります。

1
user42092

IEのテーブルでのDOM操作の使用に関する制限により、私は何かに対してまったく異なるアプローチをとることを余儀なくされました。最初は非常にイライラしていましたが、2番目のアプローチのほうが最終的には優れていたので、IEに感謝する必要があると思いました。 ;）

1
user65663

Internet Explorerでiframeの境界線を削除するには、frameborder属性をcamelCase形式として指定する必要がありますが、これはxhtmlに準拠していません。

<iframe frameBorder="0"/>
1
Adam

FirefoxとIE DOMで異なるテーブル設定が行われています。1つでは、セルの兄弟はすべて他のセルですが、もう1つはセル間に要素があります。それはありますが、1つのアプリケーションで本当に頭痛がしました。

1
cjk