Thomas: offsetHeight völlig unzuverlässig?

Beitrag lesen

SELF-Forum

offsetHeight völlig unzuverlässig?

Thomas
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Mir ist klar, dass bei element.offsetHeight die Borders, Paddings und Scrollbars in die Berechnung mit einbezogen werden.
Aber nehmen wir mal ein Element ohne diese zusätzlichen Anhängsel.
Müsste da nicht
element.offsetHeight == window.getComputedStyle(element, null).height
gelten?

Testcase:

<!DOCTYPE html>  
<html>  
<head>  
<title></title>  
<style type="text/css">  
* {margin: 0; padding: 0; border: none;}  
#div1 {background-color: red;}  
#div2 {background-color: cyan; display: inline-block; height: 200px;}  
</style>  
</head>  
<body><div id="div1"><div id="div2"></div></div>  
<script type="text/javascript">  

~~~~~~javascript
if (typeof window.getComputedStyle != 'function') { // IE  
    window.getComputedStyle = function(el, pseudoEl) {  
        if (pseudoEl)  
            return null;  
        return el.currentStyle;  
    }  
}  
var div1 = document.getElementById('div1');  
var div2 = document.getElementById('div2');  
div2.appendChild(document.createTextNode('div1.offsetHeight: ' + div1.offsetHeight));  
div2.appendChild(document.createElement('br'));  
div2.appendChild(document.createTextNode('div2.offsetHeight: ' + div2.offsetHeight));  
div2.appendChild(document.createElement('br'));  
div2.appendChild(document.createTextNode('div1.computedHeight: ' + window.getComputedStyle(div1, null).height));  
div2.appendChild(document.createElement('br'));  
div2.appendChild(document.createTextNode('div2.computedHeight: ' + window.getComputedStyle(div2, null).height));  
</script>
~~~~~~html
  
</body>  
</html>

Die Überraschung ist, dass div1.offsetHeight in jedem Browser was anderes liefert:
Opera  9: 0
Opera 10: 200
Firefox 3/Lin: 204
Firefox 3/Win: 205
Safari 3.2/Win: 204
IE 6,7: 200

und im Quirks-Mode (DOCTYPE weg):
Firefox 3/Lin/Win: 200
Safari 3.2: 200

Gerendert wird das div aber immer mit 200px Höhe und das wird auch von getComputedStyle so zurückgegeben.

Das Problem tritt hier nicht auf, wenn man 'display: inline-block' durch 'display: block' ersetzt.

Heißt das, dass man auf den Einsatz von offsetHeight lieber verzichten sollte?
Oder tritt das Problem wirklich NUR bei 'display: inline-block' auf? Habt ihr da Erfahrung?

Beitrag melden
–
Informationen zu den Bewertungsregeln