通過上圖，可以明顯的看到Grid組件的內容列發生“錯位”的現象。遇到問題的時候，本人試圖通過調試源碼和修改樣式來解決這個問題，無奈能力有限，只能去官方社區尋找答案。在更換了N個搜素關鍵字后，終于找到下面兩個類似于上述BUG的帖子：1.Webkit瀏覽器引發的ExtJS BUG (ExtJS BUGIIS-47 )2.ExtJS 3.2: Grid column header grouping第一個帖子的解決方法測試是可用的，它主要是修改獲取列寬度之和的方法（getTotalWidth）來修復這個問題，由于Webkit渲染引擎的變更（webkit352.3, chrome19以后 box-sizing默認為W3C的標準Box Model）導致每個列寬度計算的時候，列的寬度沒有把列的邊框寬度計算在內（ExtJS3.x中列邊框左右分別為1px，合計2px），因此再重載getTotalWidth方法時，為每個列加上2px的邊框寬度，此問題即可解決。第二帖子中的回復內容中，采用CSS樣式來解決此問題，我更傾向于采用這種方法解決。

@media screen and (-webkit-min-device-pixel-ratio:0) {     .x-grid3-cell, /* Normal grid cell */    .x-grid3-gcell /* Grouped grid cell (esp. in head)*/    {        box-sizing: border-box;    }}
對于我這種CSS菜鳥來說，這幾行勉強看懂，但是對于“-webkit-min-device-pixel-ratio:0”這個media type，倒是沒用過；還有box-sizing的理解也比較模糊，找了幾篇文章，其中幾篇非常值得研讀：1.media type與media query2.各瀏覽器的Hack寫法(其中包含@media screen and (-webkit-min-device-pixel-ratio:0)這種寫法的說明)3.CSS3 Box-sizing添加上述CSS后，此問題解決：
原文：http://ju.outofmemory.cn/entry/83965