IE9 は document.createElement との下位互換性を持たなくなりました - JavaScript のヒント

今日、あるウェブサイトで、IE9 と Chrome のページの機能が実際には異なることに気づき、IE9 でコンソールを開いて、fiddler で追跡したところ、そこに大量の js エラーがあることがわかりました。コード内の次のような文でした:

if(ie){
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
}

はい、問題はここにあります: DOM 例外: INVALID_CHARACTER_ERR (5)
IE9 では、document.createElement メソッドを含め、一部のメソッドが w3c 標準に近づき、Firefox、Chrome ブラウザなどと一貫性があるためです。
したがって、ここのコードを次のように変更する必要があります:

if(ie && version < 9) {
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
} else {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src','http://www.jb51.net');
}

ただし、このメタ タグをページに追加すると、IE9 のドキュメント モードを IE7 に強制的にダウングレードできます:

これによりこのバグを回避できますが、ページ上に処理できない特別なことが何もない場合は、そのような強制を追加しないでください。通常モードでは制御不能な現象が発生するため、これを推奨します。

ここでは、私が覚えている IE のさまざまなバージョンの違いのいくつかもリストします。

1、IE6 a. PNG の半透明画像はサポートされておらず、フィルター
を使用してのみ実現できます。 b. CSS の max-width、max-height、min-width、min-height はサポートされていません
言うまでもなく、他のすべては混乱していますが、互換性はまだプロジェクトに実装する必要があります。


2、IE7

a. PNG 半透明画像のサポート問題を解決しました b. CSS の max-width、max-height、min-width、min-height のサポートの問題を解決しました。 c. CSS float
によるバグを解決しました。 d. 強化された CSS セレクターなど、div ノードは :hover 疑似クラス
もサポートします。 IE6 の多くの問題は解決されていますが、IE7 は常に中間製品であり、通常の状況では、zoom:1 が万能です
。

3. IE8

a. CSS2.1 セレクターを完全にサポートし、w3c と連携し、段階的に標準化します
b. CSS での式のサポートを削除し、-ms- のプライベート プレフィックスを追加しました。 C と JS に関しては、localStorage がサポートされています
d. 多くのバージョンがあるため、UA 互換モードが開発されました: X-UA-Compatibility

4、IE9 a、css3 サポート (部分的)
b. html5 サポート (部分的)
ただし、JavaScript エンジンは Chakra に置き換えられ、パフォーマンスは非常に優れています。また、一部の DOM 操作が下位互換性を持たなくなったことも反映されています。現時点では、IE9 は w3c 標準化を達成しています。

5、IE10 a. css3 と html5 の強力なサポート b. -ms-private 属性の追加 (プライベート属性が増えると、また迷走するでしょうか? もちろん、これは Chrome と Firefox が主導権を握った場所です...あらゆる種類のプライベート属性!!!) つまり、フロントエンド開発者として、私たちは変化に従い、それに適応する必要があります。