邊距和填充正在導致計算佈局的問題

我遇到了這個問題，我沒有得到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

padding和margin它的表現更好一點，但不完全。定位代碼已經過很好的測試，所以我不認爲是這樣。

對不起，代碼稀少。任何幫助，將不勝感激。

來源

2009-03-05 John Daly

你是如何試圖檢索偏移？ – 2009-03-05 17:59:46

我做了一個簡單的測試，用你的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？

來源

2009-03-06 01:07:46 Yisroel

請記住，IE將根據它所處的渲染模式（奇怪模式與標準模式）來切換盒模型。驗證您使用的Doctype是否將IE設置爲嚴格模式，否則用於定位的框模型將不是標準的W3C模型。

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

來源

2009-03-18 16:50:04 jasonkarns

邊距和填充正在導致計算佈局的問題

回答

相關問題