javascript - kendoSplitter 内的 Pane 不遵守 "box-sizing:border-box"属性

Question

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

将 Pane 的填充设置为“5px”并将框大小设置为“边框框”。
所以，预期 pane1 的宽度包括填充是“100px”
但是在页面加载时，它在 100px 的顶部应用了填充，使宽度为 110px 并导致滚动条。

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

本案例的 jsFiddler:
http://jsfiddle.net/nagakiran/xmTJF/

但是如果我在初始化 kendoSplitter 后应用填充，它会像在这个 fiddler 中一样工作。 http://jsfiddle.net/nagakiran/hPVWf/1/

看起来这是 kendoUI 中的错误，还是我遗漏了什么？

Answer 1

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

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

但是当您使用 CSS 时，它会同时运行 kendoSplitter 并且当它询问大小时，它会得到错误 的大小。

KendoUI 应该更智能吗？也许吧，但实际上很难猜测 CSS 将要做什么并在 CSS 之前应用反作用。