【BUG】ExtJS3.4.0的Grid中垂直滾動條導致列錯位的解決方法

當ExtJS3.4.0版本（其之前的版本應該也存在此問題）的Grid組件中同時存在水平和垂直滾動條時，在Chrome瀏覽器下（基於webkit渲染引擎下的瀏覽，safari也存在，本人未測）垂直滾動條會導致內容列錯位。這是一個瀏覽器兼容性的ExtJS原生BUG（EXTJSIII-47），在ExtJS3.4.2版本中解決了。
具體效果如下圖：

通過上圖，可以明顯的看到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 query
2.各瀏覽器的Hack寫法(其中包含@media screen and (-webkit-min-device-pixel-ratio:0)這種寫法的說明)
3.CSS3 Box-sizing
添加上述CSS後，此問題解決：

原文：http://ju.outofmemory.cn/entry/83965