1

コンテナー要素の下部に絶対配置要素があります。問題は、コンテナーのコンテンツが動的に変化することです (javascript)。FF ではまだ正常に動作しますが、IE7 (他はテストしていません) は、ページの読み込み時にコンテナーの上部に対する要素の位置を計算するようで、それを更新しません。

例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
</head>
<body>
    <div style="position:relative;"
onmouseover="document.getElementById('test').style.display='block'"
onmouseout="document.getElementById('test').style.display='none'">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        <div id="test" style="display:none;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
        <div style="position:absolute;bottom:0;background-color:blue;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
    </div>
</body>
</html>

そして反対：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
</head>
<body>
    <div style="position:relative;"
onmouseover="document.getElementById('test').style.display='none'"
onmouseout="document.getElementById('test').style.display='block'">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        <div id="test" style="display:block;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
        <div style="position:absolute;bottom:0;background-color:blue;">
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
        </div>
    </div>
</body>
</html>

アイデア/回避策はありますか？

4

2 に答える 2

0

私はちょうどこれを見つけました: IE CSS バグ - ページの動的な JavaScript コンテンツが変更されたときに位置を維持するにはどうすればよいですか: 絶対

これは回避策ですが、私の状況には理想的ではありません。「テスト」でjqueryのslideDown（）メソッドを使用しているため、アニメーションの進行ではなく、アニメーションの完了後にのみ下の部分を再調整できます。あまり滑らかではありません。

他に何か？

于 2010-05-03T21:31:33.913 に答える
0

これは既知のバグです。現在、詳細も名前も覚えていません。

を使用してコンテナのレイアウトを指定してみてくださいzoom: 1。

または、試しoverflow: hiddenてみてください。

于 2010-05-03T20:59:39.837 に答える