Freigeben über

Die scrollHeight-Eigenschaft gibt möglicherweise falsche Werte in Internet Explorer zurück.

Warnung

Die eingestellte, nicht mehr unterstützte Desktop-Anwendung Internet Explorer 11 wurde durch ein Microsoft Edge-Update in bestimmten Versionen von Windows 10 dauerhaft deaktiviert. Weitere Informationen finden Sie in den Häufig gestellten Fragen zur Deaktivierung von Desktop-Apps in Internet Explorer 11.

Dieser Artikel enthält ein Beispiel zum Aufrufen der Scroll height-Eigenschaft, um die Höhe der Webseite festzulegen.

Ursprüngliche Produktversion: Internet Explorer 9 und höhere Versionen
Ursprüngliche KB-Nummer: 2684777

Symptome

Die scrollHeight Eigenschaft eines iframes kann einen Wert zurückgeben, der kleiner als erwartet ist. Die Verwendung dieses Werts zum Anpassen der Höhe des iframes kann dazu führen, dass die vertikale Bildlaufleiste erscheint, wodurch der Inhalt größer wirkt.

Ursache

Microsoft hat bestätigt, dass es ein Problem mit der scrollHeight Eigenschaftsberechnung gibt.

Problemumgehung

Fügen Sie der Höhe zusätzlichen Abstand hinzu. Dadurch werden die meisten Situationen behoben, in denen das Erscheinen der Bildlaufleiste unerwünscht ist. Wechseln Sie alternativ zum Standarddokumentmodus von Internet Explorer 9, da das Problem in diesem Modus nicht auftritt.

Weitere Informationen

Es ist nicht genau bekannt, welche Bedingungen nötig sind, damit dieses Problem auftritt. In einigen Situationen wird das Problem nur auf anderen Zoomstufen neben 100 % angezeigt.

Im Folgenden ist ein Beispiel dargestellt, bei dem die scrollHeight nicht groß genug ist, um als pixelHeight verwendet zu werden, obwohl das Padding, der Margin und der Border alle 0px im html und body Element des iframes sind. Wenn das iframe größer als der Inhalt ist, beträgt der ScrollHeight491, obwohl 491 nicht ausreicht, um zu verhindern, dass die Bildlaufleisten angezeigt werden. In diesem beispiel wird nur im Internet Explorer 8-Standardmodus reproduziert. Andere Beispiele könnten im Internet Explorer 9 und höheren Versionen im Standardmodus und/oder im Quirks-Modus reproduziert werden.

  • test.htm
<!doctype>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </head>
    <body>
        <button onclick="Test()">Set iframe's pixelHeight to scrollHeight</button><br/>
        <div id="myDiv" style="position: absolute; left: 200px; border: 2px solid black; height: 50px; width: 300px"></div>
        <iframe style="width: 182px; height: 491px; border: 1px solid green;" id=myiframe src="iframe.htm" frameBorder=0></iframe>
        <script language="javascript">
            function Test()
            {
            var obj = document.getElementById("myiframe");
            obj.style.pixelHeight = obj.contentWindow.document.body.scrollHeight;
            var result = obj.contentWindow.document.body.scrollHeight;
            document.getElementById("myDiv").innerHTML = "iframe scrollHeight = " + result + "<br/>";
            }
        </script>
    </body>
</html>
  • iframe.htm
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            body {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 70%;
            padding: 0px; margin: 0px; border: 0px;
            }
            html { padding: 0px; margin: 0px; border: 0px; }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <p>1st row in p tags</p>
                        </td>
                    </tr>
                    <tr>
                        <td>2nd row</td>
                    </tr>
                    <tr>
                        <td>
                            3rd row of text
                            <div>
                                <hr>
                                Text below the hr that wraps to next line<br>
                                This line of text is lone enough to go to four lines and at seventy five percent zoom will cause the problem<br>
                                <hr>
                                abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Wenn die Höhe des iframes basierend auf dieser Eigenschaft im Onresize-Ereignishandler festgelegt wird, müssen Sie vorsichtig sein, um einen unendlichen Datenstrom von Onresize-Aufrufen zu vermeiden, da Sie möglicherweise die Höhe des iframes zwischen einer Höhe ohne Bildlaufleisten und einer Höhe mit Bildlaufleisten umschalten. Das Hinzufügen des Abstands oder die Verwendung von Flags sollte die unendliche Rekursion verhindern.