jScrollpane + IE7：显示滚动条，但无法滚动 - 无法单击箭头，无法绘制栏 - 帮忙吗？

Question

我有一个 100% 宽度 div、自动高度、动态内容加载和自动重新初始化的 jScrollpane。工作正常，但在 IE7 中不行。

滚动条显示，高度似乎计算得很好，但是当我单击箭头或尝试绘制滚动条时，没有任何反应。

有熟悉这个的人吗？我做错了什么？非常感谢任何帮助！

这是网站网址： http://www.sporeninhetland.nl

滚动条是在子页面上实现的，例如这个： http://www.sporeninhetland.nl/over-de-hertogskuil-te- baarn/

这是我的标记：

<div class="entry scroll-pane">
<?php the_content(); ?>
</div><!– sluit entry –>

我在标题中有这个：

<script type="text/javascript" id="sourcecode">
    $j=jQuery.noConflict();
    $j(function()
    {
        $j('.scroll-pane').jScrollPane({
        showArrows: true,
        autoReinitialise: true});
    });
</script>

这是我的 CSS：

/* Styles specific to this particular page */
.scroll-pane
{
    width: 100%;
    height: auto;
    overflow: auto;
}


/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer {
    overflow: hidden;
    position: relative;
}
.jspPane {
    position: absolute;
}
.jspVerticalBar {
    background: none repeat scroll 0 0 none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.jspHorizontalBar {
    background: none repeat scroll 0 0 none;
    bottom: 0;
    height: 16px;
    left: 0;
    position: absolute;
    width: 100%;
}
.jspVerticalBar *, .jspHorizontalBar * {
    margin: 0;
    padding: 0;
}
.jspCap {
    display: none;
}
.jspHorizontalBar .jspCap {
    float: left;
}
.jspTrack {
    background: url(scroll-images/groen-streepje.png) 0 0 repeat-y scroll;
    position: relative;
}
.jspDrag {
    background: none repeat scroll 0 0 #ACC314;
    cursor: pointer;
    left: 0;
    position: relative;
    top: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}
.jspArrow {
background: url(scroll-images/pijltjes.png) 0 0 no-repeat scroll;
    cursor: pointer;
    display: block;
    text-indent: -20000px;
}
.jspArrow.jspDisabled {
background: url(scroll-images/pijltjes.png) 0 -9px no-repeat scroll; /* ander kleur pijltje */
    cursor: default;
}
.jspVerticalBar .jspArrow {
    height: 9px;
}
.jspHorizontalBar .jspArrow {
    float: left;
    height: 100%;
    width: 16px;
}
.jspVerticalBar .jspArrow:focus {
    outline: medium none;
}
.jspCorner {
    background: none repeat scroll 0 0 #EEEEF4;
    float: left;
    height: 100%;
}
* html .jspCorner {
    margin: 0 -3px 0 0;
}

.jspArrowUp
{
background-position: 0 0;
}

.jspArrowDown
{
background-position: -15px 0 !important; /* twee pijlen in één png zetten */
}
.jspArrowDown.jspDisabled {
background-position: -15px -9px !important; /* twee pijlen in één png zetten */
}
.scroll-pane
{
    width: 100%;
overflow: auto;
z-index: 99;
}

Answer 1

这是因为您的地图图像重叠，因此您无法到达滚动事件。链接顶部不要有更高的 z-index :)

您可以删除图像上的一些空白间距，因为无论如何它在滚动面板顶部都是透明的。

（通过更改 z-index / 并将 MAP 图像的负值向右增加来测试：-100px；）