1

IE6 で実際のオフセットを取得できないという問題が発生しています。オフセットを使用してポップインを配置しています。

CSS は次のようなものです。

.container50-50-right-border              { }
.container50-50-right-border .title       {padding: 0px; margin: 0px;
                                           clear: both;}
.container50-50-right-border .leftcolumn  {width: 47%; float: left;
                                           display:inline;}
.container50-50-right-border .rightcolumn {width: 48%; float: left;
                                           display:inline;
                                           border-left: 1px solid #D6D7DE;
                                           padding: 0px 0px 0px 10px;
                                           margin: 0px 0px 0px 10px;}
.container50-50-right-border .description {clear: both;}

からパディングとマージンを削除すると

.container50-50-right-border .rightcolumn

動作は少し良くなりますが、完全ではありません。位置決めコードは十分にテストされているので、そうではないと思います。

コード量が少なくてすみません。どんな助けでも大歓迎です。

4

2 に答える 2

1

IE は、現在のレンダリング モード (Quirks モードと Standards モード) に基づいてボックス モデルを切り替えることに注意してください。使用している Doctype が IE を Strict モードにしていることを確認してください。それ以外の場合、ポジショニングに使用するボックス モデルは標準の W3C モデルではありません。

http://www.quirksmode.org/css/quirksmode.html

于 2009-03-18T16:50:04.037 に答える
0

私はあなたのCSS、あなたのコメントからのjavascript、そしてこれをテストするために作成されたHTMLで簡単なテストを行いました。showDivテストする関数を追加しました

<script type='text/javascript'>
function getPositionLeft(This){
    var el = This;
    var pL = 0; 
    while(el){pL+=el.offsetLeft;el=el.offsetParent;} 
    return pL;
}

function getPositionTop(This){ 
    var el = This;
    var pT = 0; 
    while(el){pT+=el.offsetTop;el=el.offsetParent;} 
    return pT;
}

function showDiv(c){
    var d3 = document.getElementById('3');
    d3.style.position = 'absolute';
    d3.style.left = (getPositionLeft(document.getElementById('test')) + 10) + 'px';
    d3.style.top = (getPositionTop(document.getElementById('test')) + 20) + 'px';
}
</script>

<style>
.container50-50-right-border {width: 600px;}
.container50-50-right-border .title {padding: 0px; margin: 0px; clear: both;}
.container50-50-right-border .leftcolumn {width: 47%; float: left; display:inline; border: 1px solid blue;}
.container50-50-right-border .rightcolumn {width: 48%; float: left; display:inline; border-left: 1px solid #D6D7DE; padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px;}
.container50-50-right-border .description {clear: both;}
</style>

<div class="container50-50-right-border">
    <div class="leftcolumn" id="1">1</div>
    <div class="rightcolumn" id="2"><a href="test" id="test" onclick="showDiv(); return false;">test</a></div>
</div>
<span id="3" style="background: black; color: white;">move me</span>

私はIE6でテストしましたが、うまく配置されました。おそらく HTML と JavaScript など、もう少しコードを教えていただけますか?

于 2009-03-06T01:07:46.127 に答える