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

【问题标题】：How to fix incorrect top offset in internet explore如何修复 Internet Explorer 中不正确的顶部偏移
【发布时间】：2019-08-29 09:07:40
【问题描述】：

我正在尝试动态设置标题下方屏幕其余部分的 div 高度。我的代码在 chrome 等中工作，但在 IE 中，offset().top 值不正确，高度不等于屏幕的其余部分。我在页眉之后设置了一个页眉占位符 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>

【问题讨论】：

标签： jquery internet-explorer offset

【解决方案1】：

我已经设法找到问题/解决方案。

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

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

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

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

【讨论】：