Question

我的网页是一个长文档，左侧是导航窗格。 HTML基本上是

<body style="display:block;">
    <div id="nav-pane" style="width:340px; height:100%; position:absolute;">
         ....
    </div>
    <div id="main-page" style="left:371px; height:100%; position:fixed;">
         ....
    </div>
</body>

我有一个javascript函数来隐藏导航窗格以便在较小的屏幕上查看文档，但是当我在IE 8/9中调用$（“＃nav-pane”）。hide（）时，页面视图被收回到页面顶部。其他浏览器工作正常

编辑：页面中的样式链接很好

触发器是

<div id="close-button" onclick="hideMenu()">
    <img src="/wp-content/uploads/images/original/close-button.png">
</div>

并且javascript函数是

function hideMenu()
{
    $("#nav-pane").hide();
}

Answer 1

缺乏进一步的信息，有几个猜测：

猜猜1

您的真实代码是否也错过了两个div上"属性末尾的style？

<body style="display:block;">
    <!--                                                     here -------v -->
    <div id="nav-pane" style="width:340px; height:100%; position:absolute;>
         ....
    </div>
    <!--                                              and here -------v -->
    <div id="main-page" style="left:371px; height:100%; position:fixed;>
         ....
    </div>
</body>

这可能会导致解析标记时发生各种奇怪的事情。

猜猜2

您的声明“其他浏览器工作正常”令人惊讶，但是：

你没有展示你的代码或标记，告诉你如何触发它，但我猜你有：

<a href="#">the link</a>

...以及它的处理程序：

$("selector for the link").click(function() {
    $("#nav-pane").hide();
});

您需要阻止用于隐藏div的链接的默认操作。在jQuery中，您可以通过调用传递给处理程序的事件对象上的preventDefault或处理程序中的return false;（这将阻止默认和停止传播）来实现。 E.g：

$("selector for the link").click(function() {
    $("#nav-pane").hide();
    return false;
});

Answer 2

T.J. Crowder's answer应解决您的问题。但是，我遇到过与IE类似的问题。更改父元素的display或overflow属性时，浏览器将重绘文档并将滚动位置重置为0.

您的标记很可能存在问题 - 正如我在案例中提到的那样，它是父元素（body或html）。

无论如何，要解决此问题，您可以在隐藏操作之前记录窗口滚动位置，然后将窗口滚动到记录位置：

var scrollPosition = $(window).scrollTop();
// your hide action here, and then:
if ($(window).scrollTop() !== scrollPosition) {
    $(window).scrollTop(scrollPosition);
}

Answer 3

我的标记看起来有问题。只需将div设置为display：none就足以重置窗口。我目前有一个解决方法，通过设置div的宽度为0和隐藏可见性，当我解决它是Aspose创建问题时转换word文件或我的程序，使得从Apsose页面实际上看起来很好，工作正常。

谢谢大家

隐藏div会重置IE中的页面位置

3 个答案:

猜猜1

猜猜2