TextRange offsetLeft und offsetTop im Internet Explorer 8-Standardmodus (IE8) fehlerhaft

Question

May 15, 2012, 12:30 AM

TextRange offsetLeft und offsetTop im Internet Explorer 8-Standardmodus (IE8) fehlerhaft

Ich habe anscheinend ein Problem mit Internet Explorer 8 gefunden, als ich die Position eines Textbereichs fand - zum Beispiel den aktuell ausgewählten Text. Ich konnte keine Berichte zu diesem Problem in StackOverflow oder anderswo finden.

TextRange.offsetLeft und TextRange.offsetTop melden die linke und obere Ecke des Bereichs, und in allen Fällen, die ich in IE8 gesehen habe, sind sie ungefähr korrekt.außer in dem Fall, wenn der Bereich innerhalb eines IFrames liegt. Befindet sich der Bereich innerhalb eines IFrames, werden die Werte für offsetLeft und offsetTop relativ zur Position des IFrames innerhalb seines übergeordneten Elements um einen negativen Betrag verschoben. (Siehe Beispiel unten)

Dieses Problem tritt nur auf, wenn:

Der Browser ist IE8Die Seite befindet sich im Standardmodus

Diese Ausgabe tutnicht erscheinen wenn:

Der Browser ist IE7 oder IE10Die Seite befindet sich im Macken-Modus

Meine Fragen:

Können andere dieses Problem bestätigen oder bin ich verrückt?Ist das ein bekanntes Problem?Gibt es eine vernünftige Lösung oder Abhilfe? (Eine vernünftige Lösung wäre eine, bei der der JS im Frame nichts über das übergeordnete Fenster wissen muss.)

Vielen Dank.

Ein Beispiel für das Problem: (Siehe den Unterschied zwischen IE8 und IE9)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>IE8 IFrame Text Range Position Test Page</title>
        <style type="text/css">
            body {
                font-family: Tahoma;
            }
            #target {
                background-color: #CCC;
                position: absolute;
                left: 50px;
                top: 50px;
            }

            #bullsEye {
                position: absolute;
                background-color: red;
                width: 5px;
                height: 5px;
            }

            iframe {
                margin: 10px 75px;
            }
        </style>
        <script type="text/javascript" charset="utf-8">
            function target() {
                var range = document.body.createTextRange();
                range.moveToElementText(document.getElementById('target'));
                range.select();
                var bullsEye = document.createElement('div');
                bullsEye.id = 'bullsEye';
                bullsEye.style.left = range.offsetLeft + 'px';
                bullsEye.style.top = range.offsetTop + 'px';
                document.body.appendChild(bullsEye);
                document.getElementById('output').innerHTML = 'range.offsetLeft = ' + range.offsetLeft + ', range.offsetTop = ' + range.offsetTop;
            }
        </script>
    </head>
    <body>
        <div id="target">Target</div>
        <input type="button" value="Hit Target" onclick="target();"> <span id="output"></span>
        <br><br><br><br><br>
        <script>
            if (window.parent == window) document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
        </script>
    </body>
</html>