I've noticed that elements (buttons, select boxes) inside the Kendo Splitter have large borders or other styling changes in IE, but not in Chrome.
I couldn't find the cause for this by inspecting the CSS.
How can I make my elements inside the Splitter look the same in both IE and Chrome?
<!DOCTYPE html>
<html>
<head>
<base href=
"http://demos.telerik.com/kendo-ui/splitter/index"
>
<link rel=
"stylesheet"
href=
"http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css"
/>
<script src=
"http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"
></script>
<script src=
"http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"
></script>
</head>
<body>
<div id=
"example"
style=
"height:300px; width: 800px"
>
<div id=
"outsideSplitter"
>
<input type=
"button"
value=
"A Button"
/>
<input type=
"checkbox"
/>
<select style=
"width:120px"
></select>
</div>
<div id=
"splitter"
style=
"height: 100%; width: 100%;"
>
<div id=
"left-pane"
>
<div class=
"pane-content"
>
<div>
<input type=
"button"
value=
"A Button"
/>
<input type=
"checkbox"
/>
<select style=
"width:120px"
></select>
</div>
</div>
</div>
<div id=
"right-pane"
>
<div class=
"pane-content"
>
<div>
<input type=
"button"
value=
"A Button"
/>
<input type=
"checkbox"
/>
<select style=
"width:120px"
></select>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(
function
() {
$(
"#splitter"
).kendoSplitter({
panes: { collapsible:
true
}
});
});
</script>
</body>
</html>