При обновлении веб-сайта мы должны поддерживать IE в режиме совместимости, чтобы не нарушать существующие функции.Kendo UI в режиме совместимости IE - прокрутка панели панели
Существует новое боковое меню, в котором используется панель Kendo UI PanelBar. Однако, если содержимое переполняется и мы должны прокручивать, элементы управления kendo не прокручиваются правильно - элементы плавают сверху в фиксированной позиции.
Режим совместимости IE против IE Edge: (пожалуйста, игнорируйте размер разницы)
Я создал скрипку здесь, чтобы повторить:
<!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-индексами, обновляя кендо, но я не могу понять, что происходит.