大家好，我最近碰到一个Ext JS组件的样式渲染问题，想跟各位请教一下。

在桌面设备上，window.devicePixelRatio这个值对应的是用户通过Ctrl+/-或者浏览器菜单设置的页面缩放级别。当这个值不是整数的时候（比如1.25），部分Ext JS组件的样式就会出现渲染错误。

我做了一个Demo来复现这个问题，代码如下：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
    ]
});
Ext.create('Ext.grid.Panel', {
    title: 'Styles have errors when the page non-integer scaling',
    columnLines: true,
    store: store,
    features: [{
      ftype: 'summary',
      dock: 'bottom',
    }],
    columns: [
        { xtype: 'rownumberer', width: 30, summaryType: 'count' },
        { text: 'Name',  dataIndex: 'name', width: 100, locked: true },
        { text: 'Email', dataIndex: 'email', width: 150 },
        { text: 'Phone', dataIndex: 'phone', width: 120 }
    ],
    height: 200,
    layout: 'fit',
    fullscreen: true,
    renderTo: Ext.getBody()
});

下面是效果对比：

正常缩放时的显示效果：

当页面缩放至125%时，bug出现：

备注：内容来源于stack exchange，提问作者itsalongstory