IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

IE 限定 offsetParent を実験

JavaScript IE

以下の log 関数には全部 true が渡される

http://amachang.art-code.org/ierendering/014.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>IE Rendering Test</title>
<script type="text/javascript">
document.attachEvent('onreadystatechange', function() {
    var $ = function(id) { return document.getElementById(id) };
    var log = function(message) {
        $('log').appendChild(document.createTextNode(message));
        $('log').appendChild(document.createElement('br'));
    }

    if (document.readyState == 'complete') {
        // 基本的には、直近の layout を持った祖先要素が offsetParent になる
        log($('e000') == $('e001').offsetParent && $('e000').currentStyle.hasLayout);
        log($('e000') == $('e002').offsetParent && $('e000').currentStyle.hasLayout);
        log($('e000') == $('e003').offsetParent && $('e000').currentStyle.hasLayout);
        log($('e003') == $('e004').offsetParent && $('e003').currentStyle.hasLayout);

        // tagName のない無名の layout を持った要素が $('e005') と $('e004') の間に生成されている
        log($('e005').offsetParent.tagName == '');
        log($('e005').offsetParent.currentStyle.hasLayout);
        log($('e005').offsetParent.offsetParent == $('e004'));

        // td を作ると無名の要素はできない
        log($('e007').offsetParent == $('e006') && $('e006').currentStyle.hasLayout);
        log($('e008').offsetParent == $('e007') && $('e007').currentStyle.hasLayout);

        // tr 要素は layout を持つのに td 要素の offsetParent は table 要素になる
        log($('e010').offsetParent == $('e009') && $('e009').currentStyle.hasLayout);
        log($('e011').offsetParent == $('e009') && $('e009').currentStyle.hasLayout);
        log($('e010').currentStyle.hasLayout);
        log($('e012').offsetParent == $('e011') && $('e011').currentStyle.hasLayout);
    }
});
</script>
<style type="text/css">
.LAYOUT { zoom: 1 }
.RELATIVE { position: relative }
</style>
</head>
<body id="e000">
    <div id="e001">
        <div id="e002">
            <div class="LAYOUT" id="e003">
                <table id="e004">
                    <div id="e005">HOGE</div>
                </table>
                <table id="e006">
                    <td id="e007">
                        <div id="e008">HOGE</div>
                    </td>
                </table>
                <table id="e009">
                    <tr id="e010">
                        <td id="e011">
                            <div id="e012">HOGE</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="log"></div>
</body>
</html>

table が evil なだけなのかどうなのか。そこが問題だ