kendoSplitter中的窗格不尊重“box-sizing：border-box”属性

Question

我正在使用kendoSplitter创建一个包含2个窗格的页面布局。 将第一个窗格大小设置为“100px”，将剩余空间设置为第二个窗格。

将窗格的填充设置为“5px”，并将框大小设置为“border-box”。
因此，期望包括填充的pane1的宽度是“100px”
但是在页面加载时，它在100px的顶部应用了填充，使宽度为110px并导致滚动条。

$('#splitter').kendoSplitter({
    panes:[
    {collapsible:true,size:'100px'},
    {collapsible:true,resizable:true}
    ]
});

jsFiddler对于这种情况：
http://jsfiddle.net/nagakiran/xmTJF/

但是如果我在初始化kendoSplitter之后应用填充，它就像在这个小提琴手中一样。 http://jsfiddle.net/nagakiran/hPVWf/1/

看起来这是kendoUI中的一个错误，还是我错过了什么？

Answer 1

我不认为这是一个错误。可能是未记录的功能或副作用。这似乎是关于事情如何执行的顺序的问题。 请记住，HTML是由KendoUI小部件“装饰”的，因此您定义为splitter1的不只是div而是更多的东西（装饰）。

在调用kendoSplitter后设置样式时，实际上是在重新装饰KendoUI装饰的结果。由于kendoSplitter将窗格的width设置为固定宽度，因此填充不会增加额外空间。

但是当你使用CSS时，它同时运行到kendoSplitter，当它要求大小时，它会得到错误的大小。

KendoUI应该更聪明吗？也许但实际上很难猜测CSS会做什么，并在CSS之前应用计数器动作。

Answer 2

通过在kendoSplitter中添加一个标志来修复它，该标志修改了分配器窗格的宽度分配方式。如果设置了此标志，则将通过为该窗格指定的“padding-left + padding-right”减小分配给每个窗格的宽度。

之后找到了一个简单的解决方案，在每个拆分器窗格中创建包装器div并设置“box-sizing：border-box”和“padding：10px”，这没有问题。

Answer 3

Kendo与box-sizing: borderbox存在问题。 This post可能有帮助。