0

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

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

IE 兼容模式 vs IE Edge:(请忽略大小差异)

IE 兼容模式问题 IE 边缘正确

我在这里创建了一个小提琴来复制:

<!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-indexes,更新剑道,但我不知道发生了什么。

4

1 回答 1

1

保罗,尝试添加“位置:相对;” 到容器。在另一个问题上找到了这个:IE7 CSS Scrolling Div Bug

于 2015-02-04T19:05:34.593 回答