【BUG】ExtJS3.4.0的Grid中垂直滚动条导致列错位的解决方法

通过上图，可以明显的看到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