IE CSS のバグ - ページ上の動的 JavaScript コンテンツが変更されたときに、position:absolute を維持するにはどうすればよいですか

StackOverflow https://stackoverflow.com/questions/33837

質問

次のような、列とコンテンツ div があるページがあります。

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

いくつかのスタイルを適用すると、画像が列とコンテンツの間で分割されますが、整列するために同じ垂直位置を維持する必要があります。

スタイリングは次のようになります。

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

これはコンテンツが次の場合に効果的です。 #content レンダリング前に動的にロードされます。これはFirefoxでも常にうまく機能します。ただし、IE6 および IE7 では、JavaScript を使用してコンテンツ (および高さ) を変更すると、 #content, 、画像が並ばなくなりました(#column 動かない)。IE 開発者バーを使用して div を更新するだけ (たとえば、position:absolute を手動で追加する) と、画像が下にジャンプして再び整列します。

ここで何か足りないものはありますか?

@Ricky - うーん、つまり、この場合には解決策はないと思います。最高の状態では、その後はギザギザの対戦になりますが、コンテンツが拡大したり縮小したりするにつれて。非表示/表示は現実的ではありません。それでも最善の解決策を答えてくれてありがとう。

役に立ちましたか?

解決

レンダリング エンジンのバグです。私はいつもそれに遭遇します。これを解決する可能性のある方法の 1 つは、コンテンツを変更する (つまり高さが変更される) たびに div を非表示にしたり表示したりすることです。

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

これが目立たない程度に早く起こるといいのですが :)

他のヒント

私にとって効果的でちらつきの影響がなかったもう 1 つの回避策は、jQuery を使用して次のようにダミーの CSS クラス名を追加および削除することでした。

$(element).toggleClass('damn-you-ie')

Divcolを見せて隠すことからちらつきを得ることを心配している場合、別のCSSプロパティをajustすることができれば、それは同じ効果があります。

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top