Question

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

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

IE兼容模式与IE Edge :(请忽略大小差异）

IE Compatibility Mode Issue IE Edge correct

我在这里创造了一个小提琴来复制：

<!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索引，更新剑道，但我无法弄清楚发生了什么。

Answer 1

保罗，尝试添加＆＃34;职位：亲属;＆＃34;到容器。在另一个问题上找到了这个：IE7 CSS Scrolling Div Bug

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

1 个答案: