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将根据它所处的渲染模式切换盒子模型（Quirks模式与标准模式）。验证您使用的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吗？

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

2 个答案: