javascript - kendoSplitter内部的 Pane 不尊重“box-sizing:border-box”属性

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

将窗格的填充设置为“ 5px”，并将框的大小设置为“ border-box”。
因此，预计panel1的宽度（包括填充）为“ 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中的错误，还是我错过了一些东西？

最佳答案

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

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

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

KendoUI应该更聪明吗？也许可以，但是实际上很难猜测CSS会做什么，并在CSS之前应用反操作。

关于javascript - kendoSplitter内部的 Pane 不尊重“box-sizing:border-box”属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13607320/