IE8 の疑似要素の動的効果スタイルが再描画されないバグ Record_html/css_WEB-ITnose

少し前の会社のフレームワークのフロントエンド最適化では、ユーザーが設定および選択するためのモジュールのアイコン セットとしてフォント アイコン (iconfont) が使用されていました。

フォント アイコンは、非常に優れた柔軟性と再利用性を備えています。システムの全体的なデザインが比較的フラットで、アイコンが設定されている場合は、フォント サイズを通じてサイズを設定したり、色を通じて直接色を設定したりできます。がシステムに必要な場合、従来の PNG アイコンを置き換えるフォント アイコンを選択することは、非常に費用対効果の高いソリューションであると言えます。

特定のフォント アイコンの作成と使用のための素晴らしいサービス サイトがあります: www.iconfont.cn。Alimama フロントエンド チームに感謝します。

以上でiconfontのメリットを大まかに紹介しましたが、本題に入ります。

iconfont は優れていますが、残念ながら実際のプロジェクトでは、IE8 のサポートを強化する必要があります。

一般に、アイコンフォントの使用を実装するには、CSS の :before:after 疑似クラスを使用します。

幸いなことに、IE8 は、:before:after 疑似クラスを直接使用できると思いました。心配する必要はありません。その結果、テストプロセス中にピットが発見されました。具体的なケースを見てみましょう。

a タグで表されるメニュー項目があります:

おおよその効果は次のとおりです:

ユーザーがメニュー項目をクリックすると、メニュー項目が強調表示され、ステータス スタイルが必要になります。 active は a タグに追加されます。 :

この目的は、次の CSS ルールによって達成されます:

期待される (または通常の) 効果は次のとおりです:

ただし、不正な IE8 では、実際の効果は次のようなものです:

IE8 では、クラス (ここでは color) を介してフォント アイコンの表示状態を変更することは機能せず、アイコン スタイルを参照する要素 (この場合、i.item-icon) .icon-addcircle) はステータスを更新するために再描画されません。

問題を明確にした後、Google に行ったところ、IE8 にはそのようなバグがあることがわかりました。

:before:after 疑似クラスを使用する要素は、通常、content 属性と組み合わせて使用​​され、スタイルを通じてコン​​テンツ疑似要素の視覚的なパフォーマンスを動的に変更しても、疑似要素の再描画動作はトリガーされません。ただし、 content 属性の値 (コンテンツ) が変更され、ブラウザーに再描画が強制されます。

その後、解決策は、上記の原則に従って、要素を強制的に再描画することです。コードは次のようになります。

ここで、 .content-empty は次のように定義されます:

その後、適用後に毎回実行されます。疑似クラス要素にスタイルを指定するには、Util .redrawPseudoEl(el) を使用します。