web-dev-qa-db-ja.com

IE8に：before /：after擬似要素の再描画/再描画を強制する

だから私はこのカレンダーっぽいものを少しの間いじっていました：

  • Divのグリッド（テーブルを模倣）
  • 表のセルにカーソルを合わせると、それぞれが：beforeおよび：after要素を持つdivで構成される2つのアイコンのツールチップが表示されます
  • アイコンは、ホバーされたセルの色とその前の兄弟の色に応じて色が変わります（セルの色クラスがアイコンに適用されます）。

削除されたフィドル： http://jsfiddle.net/e9PkA/1/

これはIE8以下を除くすべてのブラウザーで正常に機能します（IE lte 7と私は友達になることはありませんが、IE8は良いでしょう）。

IE8はclassNamesの変更を認識し、それに応じてdivの色を更新しますが、：beforeおよび：after宣言によって暗示される色の変更を完全に無視します。

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;

    left: -8px;
    top: 6px;
    background-color: silver;
}

.wbscal_icon_arrival.wbscal_full:before {
    background-color: #ff0000 !important; 
}

上記のフィドルでは、：before /：after要素は一度だけ色付けされています：ツールチップが最初に表示されたとき。

別のバージョンでは、「テーブル」divからマウスを移動するたびに更新されますが、「セル」div境界にカーソルを合わせたときにツールチップが非表示になっている場合は更新されません。

要素/その親/ボディに/から他のクラスを追加/削除し、スタイル属性などを編集/アクセスすることにより、強制的な再描画を試みましたので、平均的な再描画の問題ではないと思います。

これを修正し、更新する：before /：afterを強制するJSハックはありますか？

javascriptcssinternet-explorer-8pseudo-element
52
fdo

同じことを理解しようとしています。基本的にIE8は、コンテンツに変更を加えない限り、擬似要素を再描画しません。したがって、ここで例を変更しました（just CSS）： http://jsfiddle.net/lnrb0b/VWhv9/ 。私は追加しました width:0およびoverflow:hiddenを擬似要素に追加してからcontent:"x"を各カラーオプションに追加します。xはスペースの増分数です。

わたしにはできる;それがあなたを助けることを願っています！

131
Stuart Burrows

擬似要素の各宣言にcontent:"x"を追加し、要素の異なる状態ごとにスペースの数を増やして、問題を明確に修正します。

基本的に、アイデアはIE8にコンテンツが各状態でわずかに異なることを伝えるため、各状態のコンテンツを再描画することです。したがって、コンテンツが同じ場合、空のスペースで「偽造」します。鮮やかさ！！

2
Vinny

@lnrbob本当にいい答え!!

私はチェックボックス入力の前後の擬似を使用して、コンテンツを表示するためにいくつかの親属性を使用しているという問題を抱えていました（そこに翻訳を簡単に実装できるため）。

そのため、次のようになります。

input:before {
    content: "" attr(data-on) "";
}

input:after {
    content: "" attr(data-off) "";
}

マークアップは次のようになります。

<div class="switch off" data-on="It is ON" data-off="It is OFF">
    <input id="switch" name="switch" type="checkbox" class="off">
</div>

jqueryで行う変更は次のようになります。

var mSwitch = $('div.switch'),
    on = $.trim(mSwitch.attr('data-on')),
    off = $.trim(mSwitch.attr('data-off'));
// remove any spaces due to trim
mSwitch .attr('data-on', on);
// add a space
mSwitch .attr('data-on', on + ' ');
mSwitch .attr('data-off', off);
mSwitch .attr('data-off', off + ' ');

そして、クラスを設定/削除した後にこの変更を呼び出して、この場合はスイッチボタンである「チェックボックス」のスタイルを変更します：D

そのため、一部の筋金入りのテスターが入力を無限に自動でクリックしても、余計なスペース文字からスタックオーバーフローが発生することはありません;）

そのような：

<div class="switch on" data-on="ON" data-off="OFF                                                                                                                                                                                                                                                 ">
1
Guntram

基本的にIE8は、コンテンツに変更を加えない限り、擬似要素を再描画しないため、次のように変更できます。

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;
    left: -8px;
    top: 6px;
    background-color: silver;
    content: '';
}

.active .wbscal_icon_arrival:before {
    background-color: gold;
    content: ' ';
}
0
Sky Yip

現在IE11とEdgeで同様の問題が発生しています。

ホバー時に、コンテンツを「v」から「V」に変更しようとします。 => Microsoftブラウザーでは動作しません。

ただし、文字を別の文字（「w」/「W」）または2文字（「vV」）に変更すると、アイコンが変わります。イェイマイクロソフト。

0
Manuel Graf