javascript - 为什么运行我的js调整程序代码会使文档在IE7-IE11和MS Edge中超过窗口高度和宽度的100％？

该脚本的目的是在不使用width和height CSS属性的情况下更改某些特殊的div大小。

<html>
    <head>
        <title>Test resizer</title>
        <script type = 'text/javascript'>
            function endsWith(str, suffix)
            {
                if (!str)
                    return false;

                return str.toString().indexOf(suffix, str.length - suffix.length) >= 0;
            }

            function fixSizeFor(start_elem)
            {
                if (document && document.body)
                {
                    var curr_elem = start_elem ? start_elem : document.body;

                    var force_size = curr_elem.getAttribute("data-forcesize");

                    if (force_size && curr_elem.parentNode.style.position.toLowerCase() == "relative" && curr_elem.style.position.toLowerCase() == "absolute")
                    {
                        var needed_width_str = curr_elem.getAttribute("data-neededwidth");
                        var needed_height_str = curr_elem.getAttribute("data-neededheight");

                        if (endsWith(needed_width_str, "%"))
                        {
                            var n_w = needed_width_str.substr(0, needed_width_str.length - 1)
                            var calculated_w = (curr_elem.parentNode.clientWidth * n_w) / 100;

                            if (curr_elem.style.width != calculated_w + "px")
                                curr_elem.style.width = calculated_w + "px";
                        }

                        if (endsWith(needed_height_str, "%"))
                        {
                            var n_h = needed_height_str.substr(0, needed_height_str.length - 1)
                            var calculated_h = (curr_elem.parentNode.clientHeight * n_h) / 100;

                            if (curr_elem.style.height != calculated_h + "px")
                                curr_elem.style.height = calculated_h + "px";
                        }
                    }

                    for (var i = 0; i < curr_elem.children.length; i++)
                        fixSizeFor(curr_elem.children[i]);
                }
            }

            setInterval(function () { fixSizeFor(null); }, 100); //comment this and weird space gone
        </script>
    </head>

    <body>
        <table border = '1' style = "width: 100%; height: 100%;">
            <tr>
                <td style = 'position: relative;'>
                    <div data-forcesize = 'true' data-neededwidth = '100%' data-neededheight = '100%' style = 'position: absolute; top: 0px; left: 0px; overflow: auto; border: dashed;'>Why the hell there is some space under table border?!</div>
                </td>
            </tr>
        </table>
    </body>
</html>

javascript - 为什么运行我的js调整程序代码会使文档在IE7-IE11和MS Edge中超过窗口高度和宽度的100％？-LMLPHP

奇怪的空间出现在IE7-IE11和MS Edge中。 Opera 15和最新的Chrome都不错。

我如何避免这种情况？

最佳答案

好的，将您的html更改为此将解决您的“怪异空间”。您可以通过更改宽度和高度的计算或像我一样更改data-neededwidth和data-neededheight属性来进行微调。

<html>
<head>
<title>Test resizer</title>
<script type = 'text/javascript'>
    function endsWith(str, suffix)
    {
        if (!str)
            return false;

        return str.toString().indexOf(suffix, str.length - suffix.length) >= 0;
    }

    function fixSizeFor(start_elem)
    {
        if (document && document.body)
        {
            var curr_elem = start_elem ? start_elem : document.body;

            var force_size = curr_elem.getAttribute("data-forcesize");

            if (force_size && curr_elem.parentNode.style.position.toLowerCase() == "relative")
            {
                var needed_width_str = curr_elem.getAttribute("data-neededwidth");
                var needed_height_str = curr_elem.getAttribute("data-neededheight");

                if (endsWith(needed_width_str, "%"))
                {
                    var n_w = needed_width_str.substr(0, needed_width_str.length - 1);
                    var calculated_w = (window.innerWidth * n_w) / 101;

                    if (curr_elem.style.width != calculated_w + "px")
                        curr_elem.style.width = calculated_w + "px";
                }

                if (endsWith(needed_height_str, "%"))
                {
                    var n_h = needed_height_str.substr(0, needed_height_str.length - 1);
                    var calculated_h = (window.innerHeight * n_h) / 101;

                    if (curr_elem.style.height != calculated_h + "px")
                        curr_elem.style.height = calculated_h + "px";
                }
            }

            for (var i = 0; i < curr_elem.children.length; i++)
                fixSizeFor(curr_elem.children[i]);
        }
    }

    setInterval(function () { fixSizeFor(null); }, 100); //comment this and weird space gone
</script>
</head>

<body>
<table id="table" border = '1' style = "width: 100%; height: 100%;">
<tr>
    <td style = 'position: relative;'>
        <div data-forcesize = 'true' data-neededwidth = '99%'  data-neededheight = '97.5%' style = 'position: relative; top: 0; left: 0; overflow: auto; border: dashed;'>Why the hell there is some space under table border?!</div>
    </td>
</tr>
</table>
</body>
</html>

关于javascript - 为什么运行我的js调整程序代码会使文档在IE7-IE11和MS Edge中超过窗口高度和宽度的100％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33767126/