kendoSplitter中的窗格並不尊重「box-sizing：border-box」屬性

Question

我正在使用kendoSplitter創建具有2個窗格的頁面佈局。 將第一個窗格大小設置爲「100px」，將第二個窗格的剩餘空間設置爲。

將窗格的填充設置爲「5px」，並將框的大小設置爲「邊框」。因此，預計包含填充的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

通過在kendoSplitter中添加一個標誌來修正它，修改寬度分配給分離器窗格的方式。如果設置了此標誌，它將通過爲該窗格指定的「填充左側+填充右側」來減少分配給每個窗格的寬度。

之後，發現了一個簡單的解決方案，在每個分隔窗格中創建wrapper div，並設置「box-sizing：border-box」和「padding：10px」，這些工作沒有問題。

Answer 2

我不認爲這是一個錯誤。可能是未記錄的功能或副作用。看起來這是關於事情執行順序的問題。 請記住，您的HTML由KendoUI小部件「裝飾」，因此您定義爲splitter1的不僅僅是您的div，而是更多的東西（裝飾）。

當您在調用kendoSplitter之後對其進行設計時，您實際上是重新裝飾了KendoUI裝飾的結果。由於kendoSplitter將窗格的width設置爲固定寬度，因此填充不會增加額外的空間。

但是當你使用CSS，它同時運行到kendoSplitter當它要求大小，它得到錯誤大小。

KendoUI應該更聰明嗎？也許，但實際上很難猜測CSS將要做什麼，並在CSS之前應用反動作。

Answer 3

劍道有問題box-sizing: borderbox。 This post可能會有所幫助。