Javascript 边距和填充导致计算布局时出现问题

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

它的表现稍微好一点，但并不完美。定位代码经过了很好的测试，所以我认为不是这样

---

很抱歉代码太少。任何帮助都将不胜感激。

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

函数getPositionLeft（此）{
var el=这个；
var-pL=0；
而（el）{pL+=el.offsetLeft；el=el.offsetParent；}
返回损益；
}
函数getPositionTop（此）{
var el=这个；
var-pT=0；
而（el）{pT+=el.offsetTop；el=el.offsetParent；}
返回pT；
}
函数showDiv（c）{
var d3=document.getElementById（'3'）；
d3.style.position='绝对'；
d3.style.left=（getPositionLeft（document.getElementById（'test'））+10）+'px'；
d3.style.top=（getPositionTop（document.getElementById（'test'））+20）+'px'；
}
.container50-50-右边框{宽度：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纯蓝色；}
.container50-50-右边框.right列{宽度：48%；浮点：左；显示：内联；左边框：1px实心#D6D7DE；填充：0px 0px 10px；边距：0px 0px 0px 10px；}
.container50-50-right-border.description{clear:两者；}
1.
感动我

---

我在IE6中测试过，它的定位很好。你能给出更多的代码吗，也许是HTML和JavaScript

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

函数getPositionLeft（此）{
var el=这个；
var-pL=0；
而（el）{pL+=el.offsetLeft；el=el.offsetParent；}
返回损益；
}
函数getPositionTop（此）{
var el=这个；
var-pT=0；
而（el）{pT+=el.offsetTop；el=el.offsetParent；}
返回pT；
}
函数showDiv（c）{
var d3=document.getElementById（'3'）；
d3.style.position='绝对'；
d3.style.left=（getPositionLeft（document.getElementById（'test'））+10）+'px'；
d3.style.top=（getPositionTop（document.getElementById（'test'））+20）+'px'；
}
.container50-50-右边框{宽度：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纯蓝色；}
.container50-50-右边框.right列{宽度：48%；浮点：左；显示：内联；左边框：1px实心#D6D7DE；填充：0px 0px 10px；边距：0px 0px 0px 10px；}
.container50-50-right-border.description{clear:两者；}
1.
感动我

---

我在IE6中测试过，它的定位很好。你能给出更多的代码吗，也许是HTML和JavaScript

请记住，IE将根据渲染模式（怪癖模式与标准模式）切换长方体模型。验证您使用的Doctype是否将IE置于严格模式，否则用于定位的box模型将不是标准的W3C模型

---

请记住，IE将根据渲染模式（怪癖模式与标准模式）切换长方体模型。验证您使用的Doctype是否将IE置于严格模式，否则用于定位的box模型将不是标准的W3C模型

---

您试图如何检索偏移量？我使用以下辅助方法：

函数getPositionLeft（This）{var el=This；var pL=0；while（el）{pL+=el.offsetLeft；el=el.offsetParent；}return pL}函数getPositionTop（This）{var el=This；var pT=0；while（el）{pT+=el.offsetTop；el=el.offsetParent；}return pT}

基本上，我获取要添加弹出窗口的链接的父级。我得到最高位置和左边位置。然后，我对偏移量做了一些小的更改，将弹出窗口放在链接旁边。您如何尝试检索偏移量？我使用以下辅助方法：

函数getPositionLeft（This）{var el=This；var pL=0；而（el）{pL+=el.offsetLeft；el=el.offsetParent；}返回pL}函数getPositionTop（This）{var el=This；var pT=0；while（el）{pT+=el.offsetop；el=el.offsetParent；}return pT}

基本上，我获取我要添加弹出项的链接的父级。我获得顶部位置和左侧位置。然后对偏移进行一些小的更改，将弹出项放在链接旁边