余白と余白がレイアウトの計算に問題を引き起こしています

Question

IE6で真のオフセットが得られないところでこの問題が発生しています。私は、ポップインを配置するためにオフセットを使用しています。私は

.container50-50-right-border .rightcolumn 

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

.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;} 

はそれが少し良くなく、完璧に動作します。

CSSは次のようなものです。測位コードは十分にテストされているので、私はそうは思わない。

ご迷惑をおかけして申し訳ありません。どんな助けもありがとう。

Answer 1

私はあなたの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を提供できますか？

Answer 2

IEは、ボックスモードをどのレンダリングモードにするか（QuirksモードとStandardsモード）に基づいて切り替えます。使用しているDoctypeがIEをStrictモードにしていることを確認します。そうでなければ、それが位置決めに使用するボックスモデルは標準のW3Cモデルではありません。

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