TextRange offsetLeft i offsetTop złamane w trybie standardów Internet Explorer 8 (IE8)

Question

May 15, 2012, 12:30 AM

TextRange offsetLeft i offsetTop złamane w trybie standardów Internet Explorer 8 (IE8)

Wydaje mi się, że znalazłem problem z Internet Explorerem 8, gdy znajduję pozycję zakresu tekstu - na przykład aktualnie zaznaczony tekst. Nie udało mi się znaleźć żadnych raportów dotyczących tego problemu na StackOverflow lub w innym miejscu.

TextRange.offsetLeft i TextRange.offsetTop raportują lewy i górny róg zakresu, a we wszystkich przypadkach, które widziałem w IE8, są z grubsza poprawne,z wyjątkiem przypadku, gdy zakres mieści się w ramce IFrame. Gdy zakres znajduje się w ramce IFrame, wartości offsetLeft i offsetTop są przesuwane o wartość ujemną w stosunku do pozycji IFrame w obrębie jej rodzica. (Patrz przykład poniżej)

Ten problem pojawia się tylko wtedy, gdy:

Przeglądarka to IE8Strona jest w trybie standardowym

Ten problem dotyczynie pojawiają się, gdy:

Przeglądarka to IE7 lub IE10Strona jest w trybie dziwactwa

Moje pytania:

Czy inni mogą potwierdzić ten problem, czy jestem szalony?Czy to znany problem?Czy są jakieś rozsądne rozwiązania lub obejścia? (Rozsądnym rozwiązaniem byłoby takie, w którym JS w ramce nie musi nic wiedzieć o swoim oknie nadrzędnym)

Dzięki.

Przykład problemu: (Zobacz różnicę w IE8 vs. 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>