今天我在使用一些jquery 佈局插件和 jquery ui 的時候 css
在使用resizeable 和 佈局的時候 因爲涉及到計算大小高度,結果就發現插件的計算總數出現誤差, jquery
這裏面採用的bootstrap是3.*版本,對了一段時間發現是bootstrap修改了盒子模型 web
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
致使了計算是不一致的 bootstrap
關於CSS盒子模型 併發
緣由採用的佈局方案是 jquery layout ,layout.sizes(計算問題)(比較老,盒子模型不一致,並不是 jquery ui 問題) 佈局
content-box | 這是由 CSS2.1 規定的寬度高度行爲。 ui 寬度和高度分別應用到元素的內容框。 spa 在寬度和高度以外繪製元素的內邊距和邊框。 插件 |
border-box | 爲元素設定的寬度和高度決定了元素的邊框盒。 調試 就是說,爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。 |
inherit | 規定應從父元素繼承 box-sizing 屬性的值。 |
目前我不可能去修改插件,直接修改bootstrap的盒子模型也難以預料併發的BUG,還好在resize 和佈局對象 大可能是絕對定位的,目前先不要在這些對象上面設置margin,border等信息
記錄 ,調試很累。
解決問題方案: 佈局對象(west,east,north,south)上面不要設置border,margin padding 屬性, 避免盒子模型問題