Kendo UI 在 IE 兼容模式下 - 滚动面板栏

Question

在更新网站的过程中，要求我们在兼容模式下支持IE浏览器，以免破坏现有功能。

有一个新的侧边菜单，它使用Kendo UI的PanelBar。但是，如果内容溢出并且我们必须滚动，kendo 控件不会正确滚动 - 项目浮动在固定位置的顶部。

IE 兼容模式与 IE Edge：（请忽略大小差异）

我在这里创建了一个fiddle来复制：

<!DOCTYPE html>
<html class="k-webkit k-webkit40">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Kendo UI - jsFiddle demo by paulcoghill</title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
        <style type="text/css"></style>
        <link rel="stylesheet" type="text/css" href="/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.blueopal.min.css">
        <script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
        <style type="text/css">
            h1{
            margin-bottom: 30px;
            }
            #container{
            height: 200px;
            width: 200px;
            padding 5px;
            background-color: red;
            overflow: auto;
            }
        </style>
        <script type="text/javascript">//<![CDATA[ 
            $(window).load(function(){
            $(document).ready(function() {
                $("#panelbar").kendoPanelBar({
                    expandMode: "single"
                });
            });
            });//]]>  

        </script>
    </head>
    <body hola-ext-player="1">
        <div id="container">
            <h1>Header</h1>
            <ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu">
                <li class="k-item k-state-default k-first" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
            </ul>
            <div>
            </div>
        </div>
    </body>
</html>

http://jsfiddle.net/paulcoghill/k4gqq2dk/7/

您可以在兼容模式下查看结果进行测试： http://jsfiddle.net/paulcoghill/k4gqq2dk/7/embedded/result/

任何人都可以找到解决方法或解决这个问题吗？

我试过处理差异溢出和 z 索引，更新 kendo，但我不知道发生了什么。

Answer 1

Paul，尝试将 "position: relative;" 添加到容器中。在另一个问题上发现了这个：IE7 CSS Scrolling Div Bug

Kendo UI 在 IE 兼容模式下 - 滚动面板栏

Kendo UI in IE Compatability Mode - Scroll a panel bar

css

internet-explorer

kendo-ui

ie8-compatibility-mode

kendo-panelbar