margin und padding verursachen Probleme bei der Berechnung Layout

Question

Ich habe dieses Problem, wo ich nicht den wahren Offset in IE6 bekomme. Ich verwende den Offset, um ein Pop-In zu positionieren.

Die CSS ist so etwas wie dieses:

.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;} 

, wenn ich die Polsterung und Marge aus dem

.container50-50-right-border .rightcolumn 

entfernen verhält es sich ein wenig besser, aber nicht perfekt. Der Positionierungscode ist gut getestet, also glaube ich nicht, dass es das ist.

Entschuldigung für die geringe Menge an Code. Jede Hilfe wäre willkommen.

Answer 1

Ich habe einen einfachen Test mit Ihrem CSS, dem Javascript aus Ihrem Kommentar, und einige HTML gemacht, um dies zu testen. Ich fügte hinzu, die showDiv Funktion

<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> 

ich in IE6 getestet, um zu testen, es positioniert in Ordnung. Können Sie etwas mehr Code geben, vielleicht HTML und JavaScript?

Answer 2

Denken Sie daran, IE wird Box-Modelle basierend auf dem Rendermodus wechseln (Quirks-Modus vs Standards-Modus). Stellen Sie sicher, dass der von Ihnen verwendete Doctype den IE in den Strict-Modus versetzt, andernfalls ist das Boxmodell, das für die Positionierung verwendet wird, nicht das Standard-W3C-Modell.

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