nicht angemeldet
offsetHeight völlig unzuverlässig?
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?
-
Das Verhalten von offsetHeight ist sogar zutreffender als das von getComputedStyle. Ersteres gibt die tatsächliche, wenn auch teilweise unsichtbare Höhe (die Zeilenhöhe des Nodes, innerhalb dessen das div sich befindet, eingerechnet), letzteres die sichtbare CSS-Höhe an.
Je nachdem, welchen Wert Du brauchst, musst Du das eine oder das andere einsetzen.
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes -
Yerf!
Oder tritt das Problem wirklich NUR bei 'display: inline-block' auf? Habt ihr da Erfahrung?
display:inline-block liefert dir einen inline-Inhalt in einer Line-Box. Damit musst du unter anderem auch Eigenschaften wie line-height und vertical-align mit in die Betrachtung einbeziehen. (Die 4-5 Pixel mehr im FF könnten z.B. durch den Platz für Unterlängen entstehen, teste zum vergleich mal mit vertical-align:bottom)
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Ich ziehe die Frage zurück.
Wer wissen will, wieso, der schaue sich mal den Testcase ohne JavaScript an und lese sich den letzten Satz von http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align durch.