Question

我在使用<!doctype html />时正在编写一个IE8 - IE10修复元素大小的一般内容，所以我永远不需要编写很多CSS垃圾来制作我需要的布局。
我的意思是这个（就像div的宽度和高度从未设置为100％）：

enter image description here

所以，我编码了这个：

<!doctype html />
<html style = "height: 100%;">
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <title>test size fixer</title>

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

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

            //recursively calculating elemens sizes based on their parents sizes
            function fixDimensionsRecursiveIn(start_elem)
            {
                if (!document || !document.body)
                    return;

                var curr_elem = start_elem ? start_elem : document.body;

                //currently fixing size for this containers only
                if (curr_elem.tagName.toLowerCase() == "div" || curr_elem.tagName.toLowerCase() == "table")
                {
                    var curr_w = curr_elem.width || curr_elem.style.width; //determine current size
                    var curr_h = curr_elem.height || curr_elem.style.height;
                    var parent_w = curr_elem.parentNode.clientWidth || curr_elem.parentNode.offsetWidth; //determine element parent rendered size
                    var parent_h = curr_elem.parentNode.clientHeight || curr_elem.parentNode.offsetHeight;

                    var w_fixed = false; //if size were fixed at first step
                    var h_fixed = false;

                    var new_width = null; //new calculates sizes based on parent element
                    var new_height = null;

                    if (endsWith(curr_w, "%") && parent_w > 0) //if current element size set with %
                    {
                        curr_elem.original_width = curr_w; //saving original width into new field
                        curr_w = curr_w.substr(0, curr_w.length - 1); //removing % for calculations
                        new_width = (curr_w * parent_w) / 100; //calculating the width of this element based on parent's width
                        curr_elem.style.width = Math.floor(new_width) + "px"; //applying new width to current element

                        w_fixed = true; //setting flag that we no need to fix width for this elem anymore
                    }

                    if (endsWith(curr_h, "%") && parent_h > 0) //same, but for height
                    {
                        curr_elem.original_height = curr_h;
                        curr_h = curr_h.substr(0, curr_h.length - 1);
                        new_height = (curr_h * parent_h) / 100;
                        curr_elem.style.height = Math.floor(new_height) + "px";

                        h_fixed = true;
                    }

                    //so, at first we replaced % size with px size, but we somehow need to resize elements later
                    //that's why we saved original sizes into new field. Now we retrieve it and use for next calculations
                    var possible_original_width = curr_elem.original_width;
                    var possible_original_height = curr_elem.original_height;

                    if (!w_fixed && endsWith(possible_original_width, "%") && parent_w > 0) //if elem width wasn't fixed at first step, then it means it already swapped % size with calculated px size
                    {
                        possible_original_width = possible_original_width.substr(0, possible_original_width.length - 1); //removing % from size
                        new_width = (possible_original_width * parent_w) / 100; //calculating new size
                        curr_elem.style.width = Math.floor(new_width) + "px"; //applying it
                    }

                    if (!h_fixed && endsWith(possible_original_height, "%") && parent_h > 0)
                    {
                        possible_original_height = possible_original_height.substr(0, possible_original_height.length - 1);
                        new_height = (possible_original_height * parent_h) / 100;
                        curr_elem.style.height = Math.floor(new_height) + "px";
                    }
                }

                for (var i = 0; i < curr_elem.children.length; i++) //fixing sizes for it's children
                    fixDimensionsRecursiveIn(curr_elem.children[i]);
            }

            setInterval(fixDimensionsRecursiveIn, 500);
        </script>
    </head>
    <body style = "height: 100%; margin: 0px;">
        <table border = "1" width = "100%" height = "100%">
            <tr>
                <td colspan = "2" height = "1px">header</td>
            </tr>
            <tr>
                <td width = "40%" align = "center" valign = "middle" style = "background-color: Silver;">
                    <div style = 'width: 100%; height: 100%; border: dashed;'>should be 100% of silver cell</div>
                </td>
                <td>text</td>
            </tr>
            <tr><td colspan = "2" height = "1px">bottom panel</td></tr>
        </table>
    </body>
</html>

但问题是，当任何元素大小设置为100％时，它会在每个大小的修复调用中不断增长。我甚至试图将计算出的尺寸减少1和2像素，但它仍然会增长。

enter image description here

我需要理解为什么它会增长...首先我认为这是因为错误的计算，然后我曾尝试应用Math.floor，但这并没有帮助。

为什么我的元素大小修复代码总是在最初设置为100％时增加元素大小？

0 个答案: