2

次のような列とコンテンツ 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 Developer Bar を使用して div を更新すると (たとえば、position:absolute を手動で追加すると)、画像が下にジャンプして再び整列します。

私がここに欠けているものはありますか？

@Ricky - うーん、つまり、この場合、解決策はないと思います。最良の場合、後でギザギザのマッチアップがありますが、私のコンテンツが拡大したり縮小したりすると、非表示/表示は実用的ではなくなります. 最善の解決策で答えてくれてありがとう。

4

3 に答える 3

3

レンダリング エンジンのバグです。私はいつもそれに出くわします。それを解決する1つの潜在的な方法は、コンテンツを変更するたびにdivを非表示にして表示することです(それにより高さが変わります):

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

うまくいけば、これは目立たないほど速く発生します:)

于 2008-08-29T02:30:41.463 に答える
1

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

$(element).toggleClass('damn-you-ie')
于 2010-11-21T08:33:27.677 に答える
0

divCol の表示と非表示によるちらつきが心配な場合は、別の css プロパティを調整すると、同じ効果が得られます。

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
于 2010-01-15T16:40:36.377 に答える