边距和填充导致计算布局问题

Question

我遇到了这个问题，在 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

它的表现会好一点，但并不完美。 定位代码已经过充分测试，所以我不认为是这样。

对于代码量稀疏表示抱歉。 任何帮助，将不胜感激。

Answer 1

请记住，IE 将根据其所处的渲染模式（怪异模式与标准模式）切换盒子模型。 验证您使用的 Doctype 是否将 IE 置于严格模式，否则它用于定位的盒模型将不是标准的 W3C 模型。

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

Answer 2

我用你的 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？