3

番号付きリストが欲しかったので、css で使用できるこのクールなカウンターを見つけて、ブラウザーに数値を計算させました。

ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
    content:counter(instructions-section); 
    counter-increment:instructions-section;
}

作成中の html には命令セットのページが含まれており、各セットには 1、2、3 などの番号が付けられています。一度に表示できるセットは 1 つだけです。ヘッダーをクリックすると、そのセットが表示され、他のセットは非表示になります。

それはごちそうのように機能し、誰かが Internet Explorer 8 でテストすることを考えるまで、私たちは笑顔でそこに座っていました。クリックしてセットを表示すると、すべての数字がゼロ (0) でした。

私はグーグルで検索してこのページを見つけました-問題をかなりよく説明しています（非表示のコンテンツで使用される:hoverとcssカウンターロジックの使用の組み合わせです）が、満足のいくものではない解決策を提供します-維持できるのが大好きですcssカウンターを使用して、何らかの形でページの数値を更新するie8固有のハックを実装するだけです。この問題についてインターネットで他の情報を見つけるのに苦労しています。

私の特定のページでは、番号付きリストを含む div にマウス ポインターを移動するまでゼロが記述されます。その時点で、数字は魔法のように修正されます。マウスが要素の上に置かれているとページを「微調整」することができるものはありますか? または、より適切な解決策はありますか？

4

2 に答える 2

1

私は同じ問題を抱えていました。要素が表示されたら、JavaScript を使用して padding-left 0 のインライン CSS を適用することで修正できました (左パディングは既にありませんでした)。これにより、IE が要素を「再描画」するようです。

于 2015-10-13T15:01:22.213 に答える
0

示唆されているように、「非表示」が問題を引き起こしている場合は、次の CSS を使用してコンテンツを画面外に移動することで、コンテンツを「非表示」にすることができます。

.hide {
  position:absolute;
  left: -1000px;
}

リンク先のドキュメントのコード例を使用して、ここで可能な解決策を示しました: http://codepen.io/akademy/pen/LDhGl

于 2014-02-04T19:30:24.663 に答える