IE CSS のバグ - ページ上の動的 JavaScript コンテンツが変更されたときに、position:absolute を維持するにはどうすればよいですか
-
09-06-2019 - |
質問
次のような、列とコンテンツ 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 = '';