如何修复 Internet Explorer 中不正确的顶部偏移

Question

我正在尝试动态设置 div 高度，屏幕的其余部分低于我的 header。我的代码适用于 chrome 等，但在 IE 中，offset().top 值不正确并且高度不等于屏幕的其余部分。我在 header 之后设置了一个 header 占位符 div，然后在页面底部设置了一个绝对位置的页脚占位符。检查元素时，两个占位符 div 位置正确，但高度计算错误。

请帮忙。

我试过使用 jquery offset().top 和正常的 javascript offsetTop。两者在其他浏览器中都可以正常工作，但在 IE 中却不行


alert($('#ftr-plcHldr').offset().top);
alert($('#hdr-end').offset().top);
alert(calcedHeight);

//IN CHROME WHICH IS CORRECT:
968 //Footer place holder offset
96 //Header place holder offset
872 //Calculated Height

//IN IE WHICH IS INCORRECT:
961 //Footer place holder offset
193.28 //Header place holder offset
767.2 //Calculated Height



var calcedHeight = $('#ftr-plcHldr').offset().top - $('#hdr-end').offset().top;


Html:
<div style="background:#3f3f3f;">
    <div class="container">
        <div class="row">
            <div class="col-xs-12" style="text-align:right;padding:5px;">
                <div style="float:left;padding-top: 8px; padding-bottom: 7px; padding-left: 10px;cursor:pointer;">
                    <a style="color:chocolate;"><i class="fa fa-cogs"></i> My Config</a>
                </div>
                <div style="float:right;border-left-color: black; border-left-width: 1px; border-left-style: solid;margin-left: 25px;padding-left:10px;">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="border: 1px solid grey; border-image: none; color: white; background-color: transparent;width:100px;">
                            Menu
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                            <li>
                                <a style="cursor:pointer;">Approval Inbox</a>
                            </li>
                            <li>
                                <a style="cursor:pointer;">Dashboard</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="padding-top: 8px; padding-bottom: 7px; padding-left: 10px; float: right;cursor:pointer;">
                    <a style="color:darkgoldenrod;"><i class="fa fa-shopping-cart"></i> Shopping Basket</a>
                </div>
                <div style="clear:right;"></div>
            </div>
        </div>
    </div>
</div>
<div id="hdr-end" style="width:100%;height:1px;"></div>

<div class="container">
    <div class="row">
        <div id="content-holder" class="col-xs-12" style="overflow-y:auto;position:relative;">
CONTENT THAT FILL THE REST OF THE SCREEN
</div>
    </div>
</div>
<div id="ftr-plcHldr" style="position:absolute;bottom:0;width:100%;height:1px;"></div>

Answer 1

我找到了 problem/solution。

此问题是由在 css 中设置宽度的图像引起的。

图片原为 160px，css 将宽度设置为 134px。

将图片的实际宽度更改为 134px 已解决问题。

我仍然不确定为什么，因为这在其他浏览器中不是问题，但它已经解决了这个问题。

如何修复 Internet Explorer 中不正确的顶部偏移

How to fix incorrect top offset in internet explore

jquery

internet-explorer

offset