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

【问题标题】：margin and padding are causing issues calculating layout边距和填充导致计算布局问题
【发布时间】：2010-10-11 13:50:54
【问题描述】：

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

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

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

【问题讨论】：

您如何尝试检索偏移量？
我使用以下辅助方法： 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 }
基本上我采用要添加弹出窗口的链接的父级。我得到顶部位置和左侧位置。然后，我对偏移量进行了一些小的更改，以将弹出窗口放在链接旁边

标签： javascript css padding margin offset

【解决方案1】：

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

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

【讨论】：

【解决方案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？

【讨论】：