Selectivizr、IE8およびホワイトスクリーンオブデス

Internet Explorer 8、この名前の普通のWeb開発者にはいくらですか:-)一方ではまだ市場の重要な部分を保持している(したがって無視できない)ブラウザであり、もう一方にはIE6の古いレガシーがあります行動の「特徴」の塊の形と、あなたが本当に使いたい多くの新しくておいしい技術に対するサポートの欠如。 この二重性は、いわゆる ポリフィル-IE6-8を最新のブラウザのレベルに少なくともわずかに引き上げるように設計されたJSスクリプト。 それらの1つについては、この記事で説明します。



Selectivizrは、IE6-8で多数のCSS3セレクターのサポートを魔法のように(単純にページに接続することで)追加する素晴らしいスクリプトです。これにより、開発者はCSS3セレクターの使用を除外するためにコードやサイトスタイルに多数の「クランチ」を追加する必要がなくなります。 その作業には、接続されたJSフレームワーク(jQuery、Mootools、Prototype、Dojo、および他のいくつかがサポートされています)の存在が必要ですが、これらのフレームワークの1つは通常、ほとんどすべての最新サイトに存在します。



もちろん、selectivizrは全能ではありません。現時点では、たとえば動的コンテンツでの使用には制限がありますが、いずれにしても非常に便利なスクリプトであり、最新のすべてのプロジェクトを開発するときに使用します。 コミュニティと情報を共有するためにこの短い記事を書くことを私に促したのは、まさに彼らの1人の問題でした。



プロジェクトの1つを開始する前に、IE8でサイトの奇妙な動作に関するバグレポートをテスターから受け取りました:URLを入力してサイトをロードしようとすると、ブラウザーに空白のページが表示されましたが、アドレスバーでEnterを再度押すと、サイトは通常ロードされ、表示され、機能しました。 この場合、問題はIE8のみに関係し(実際にはIE7ですが、そのプロジェクトではサポートされていませんでした)、IE9はIE8の動作モードで正常に動作しました。 さらに、問題をさらに調査すると、次のことがわかりました。



...しかし、ページ自体は完全に空白に見えました。 開発者ツールでは、<BODY>の高さがゼロであることは明らかでしたが、高さを設定および/または変更しようとしても何も起こりませんでした。



インターネットで回答を検索すると、問題は既知であることが示されました( 1、2、3 )が、提案された解決策は機能しません。



追加の実験で、問題はselectivizrとCSSの@ font-faceフォントのカスタム宣言の競合にあることが示されました。 同時に、1つのニュアンスが発見され、最終的には現時点で問題を回避できます。@ font-face宣言が外部 .cssファイルにある場合にのみ競合が発生します。 <font>タグに@ font-face宣言を配置すると、競合は発生せず、カスタムフォントは正常に機能し、WSODは消えます。



この情報が有用であり、WSODの原因とそれを解決する方法を探す時間を節約できることを願っています。



All Articles