また遭遇。
ブラウザ間の動作非互換性です。
Netscape 7.02でclientWidth/clientHeightが動作しないケースがあります。
検証プログラム §
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<script><!--
function onLoad()
{
var h1 = document.getElementById('t1').clientHeight;
var h2 = document.getElementById('t2').clientHeight;
var h3 = document.getElementById('t3').clientHeight;
var hbody = document.body.clientHeight;
document.write("<p>" + h1 + "</p>");
document.write("<p>" + h2 + "</p>");
document.write("<p>" + h3 + "</p>");
document.write("<p>" + hbody + "</p>");
}
// --></script>
</head>
<body onload="onLoad()" id="t1">
<div id="t2"><p id="t3">test</p></div>
</body>
</html>
通常、これを開くと、4つのゼロではない数字が表示されます。(Internet Explorer 6.0, Firefox 1.0.7, Opera 8.5, Netscape 8.0.4[Gecko/IE]で確認)
しかし、Netscape 7.02で開くと、2番目と3番目の数字がゼロになります。
どうも、body以外の要素について、clientWidth/clientHeightが機能していないような印象があります。
ちなみに、この2つはマイクロソフトがInternet Explorerに実装した機能で、W3CのDOMにはないものです。
対策 §
offsetWidth/offsetHeightに置き換えてみる……。しかし、これを行うと要素の縁の部分のサイズも含めたサイズが取得されてしまうので、完全互換ではありません。
何か良い方法はないものかな?
