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

【问题标题】：Panes inside kendoSplitter doesn't respect "box-sizing:border-box" propertykendoSplitter 中的窗格不尊重“box-sizing:border-box”属性
【发布时间】：2012-11-16 10:29:00
【问题描述】：

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

将窗格的内边距设置为“5px”，并将框大小设置为“border-box”。
因此，预计窗格 1 的宽度（包括填充）为“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 中的错误还是我遗漏了什么？

【问题讨论】：

标签： javascript jquery css kendo-ui

【解决方案1】：

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

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

但是当您使用 CSS 时，它运行同时到 kendoSplitter，当它要求尺寸时，它得到 错误的尺寸。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：