7

http://jsbin.com/ararar/5/edit

tl;dr 上記のリンクは、以下でさらに説明する問題の簡単な例です。Li:s をクリックして削除し、IE9 または IE10 でレンダリングの不具合を確認します。

私のチームが作成しているアプリには、一致数に応じて高さが変化する検索結果用のボックスがあります。要素にはボックス シャドウが適用されています。ボックスが小さくなると、IE9 と IE10 で問題が発生します。IE はボックス シャドウを「忘れ」、要素の内部部分のみを再レンダリングするようです。box-shadow はサイズ変更された要素の下部にレンダリングされますが、通常、要素のサイズ変更前にレンダリングされた場所にシャドウのコピーが残されます。

これを回避する方法があれば、どんな情報でも大歓迎です。

4

3 に答える 3

14

私は Andy から解決策を学びましたが、マークアップに空の要素を配置する代わりに、空の CSS 疑似要素を親 (サイズ変更された要素ではなく影のある要素) に追加しただけです。

.shadowed-element:after { content: ""; }

jQuery でアニメーション化された高さと完全に連携し、最後だけでなくアニメーション中に再描画します。私を正しい軌道に乗せてくれてありがとう、アンディ！

于 2013-07-24T19:12:21.233 に答える
5

（この回答は少し遅れていることを認識していますが、実際の解決策/回避策を文書化する価値があると思います。）

最近、同様の問題がありました。<div>解決策は、ボックスの影のあるタグの下に追加のタグを追加することです。これら 2 つの の間にマージンがないこと<div>、および高さが少なくとも下の影の高さと同じ高さであり、幅が影と同じ幅であることを確認してください。これにより、底が上に移動したときに影があった領域をIEが再描画するように見えまし<div>た。

<div>あなたの場合、 「shadow-fix」を追加するだけでなく、ボックスの影で左右のマージンを追加しました<div>。ここで新しいバージョンを確認できます: http://jsbin.com/ararar/51/edit

あなたや他の誰かに役立つことを願っています。

于 2013-05-02T17:32:40.343 に答える
0

この css を追加して、ブラウザーが新しい高さを削除するようにしましたが、現在は機能していますか?

CSS

#resizing ul li {
 line-height:1em;
 height:1em;
}
于 2013-02-05T09:33:22.630 に答える