Свойство scrollHeight может возвращать неверные значения в Internet Explorer

Предупреждение

Устаревшее и не поддерживаемое классическое приложение Internet Explorer 11 было окончательно отключено путем обновления Microsoft Edge в некоторых версиях Windows 10. Дополнительные сведения см. в разделе Часто задаваемые вопросы о прекращении поддержки программы для настольных компьютеров Internet Explorer 11.

В этой статье приведен пример вызова свойства "Высота прокрутки", чтобы задать высоту веб-страницы.

Исходная версия продукта: Internet Explorer 9 и более поздние версии
Исходный номер базы знаний: 2684777

Симптомы

Свойство scrollHeight iframe может возвращать значение меньше ожидаемого. Использование этого значения для изменения высоты iframe может привести к появлению вертикальной полосы прокрутки, что сделает содержимое выше.

Причина

Корпорация Майкрософт подтвердила, что возникла проблема с вычислением scrollHeight свойств.

Обходное решение

Добавьте дополнительный отступ по высоте. Это поможет решить большинство ситуаций, когда полоса прокрутки нежелательна. Кроме того, переключитесь в стандартный режим документов Internet Explorer 9, так как проблема не возникает в этом режиме.

Дополнительная информация

Это не совсем известно обо всех условиях, необходимых для появления этой проблемы. В некоторых ситуациях проблема отображается только на других уровнях масштабирования, кроме 100 %.

Ниже приведен пример, в котором scrollHeight недостаточно велик для использования в качестве pixelHeight, несмотря на то что padding, margin и border все равны 0px в iframe и в элементах html и body. Если iframe больше содержимого, он показывает scrollHeight равный 491, даже если 491 недостаточно, чтобы предотвратить появление полос прокрутки. Этот конкретный пример воспроизводит только в режиме стандартов Internet Explorer 8. Другие примеры могут воспроизводиться в режиме стандартов Internet Explorer 9 и более поздних версий и (или) режиме Quirks.

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>

Если высота iframe задана на основе этого свойства в обработчике событий onresize, необходимо быть осторожным, чтобы избежать бесконечного потока вызовов onresize, так как вы можете переключать высоту iframe между высотой без полос прокрутки и высотой с полосами прокрутки. Добавление заполнения или использование флагов должно препятствовать бесконечной рекурсии.

Последнее обновление: 2020-06-09