javascript - Extjs - 网格列不与 chrome 中的网格标题对齐

Question

我有一个奇怪的问题，其中 extjs 网格的列无法与其列标题对齐。这是特定于 Chrome 的。

这是示例：

和Firefox中的相同代码（浏览器宽度不同）：

这是我的代码：

var summaryGrid = Ext.create('Ext.grid.Panel', {
    store: 'summary-data',
    stripeRows: true,
    columnLines: true,
    autoShow: true, 
    loadMask: true,
    forceFit: true,
columns: [ 
        {header: 'Code', dataIndex: 'code', width: 65},
        {header: 'Type', dataIndex: 'type'},
        {header: 'Attributes', dataIndex: 'attributes'},
    {header: 'Count', dataIndex: 'count'},
        {header: 'Text', dataIndex: 'text', flex: 1},
        {
    header: 'Waived', 
    dataIndex: 'waived'
    },
    {
    xtype: 'actioncolumn',
    items: [{
        icon: './images/add.png',
        tooltip: "Modify the waivers associated with this row.",
        handler: function(grid, rowIndex, colIndex){
            //alert("Button clicked");
            var record = summaryGrid.getStore().getAt(rowIndex);
            WaiverRowIndex = rowIndex;
            WaiverCode = record.get("code");                
            WaiverSource = "context";
            console.log(WaiverCode);
            waiverWin.show();
        }
    },
    {
        icon: './images/remove.png',
        tooltip: "Modify the waivers associated with this row.",
        handler: function(grid, rowIndex, colIndex){
            //alert("Button clicked");
            var record = summaryGrid.getStore().getAt(rowIndex);
            WaiverRowIndex = rowIndex;
            WaiverCode = record.get("code");                
            WaiverText = record.get("text");
            WaiverSource = "context";
            WaiverType = "ALL";
            Ext.MessageBox.confirm('Confirm', 'Remove all waivers on messages with Code: '+WaiverCode, removeWaiver);

        }
    }]
    },  
    ],
bbar: Ext.create('Ext.PagingToolbar', {
    pageSize: 25,
    store: 'summary-data',
    displayMsg: 'Displaying messages {0} - {1} of {2}',
    emptyMsg: "No messages to display"
    }),
listeners: {
        itemdblclick: function(dv, record, item, index, e) {
            CodeRegexp = record.get("code");
            TypeRegexp = record.get("type");
            globalRefresh("true");      
        }
    },
viewConfig: {
    getRowClass: function(record) {
        if(record.get('type') == "Error"){
            return 'error-row';
        }else if(record.get('type') == "Warning"){
            return 'warning-row';
        }else{
            return 'normal-row';
        }
    }       
}

对于 Chrome 为何如此奇怪地渲染此网格，我将非常感谢任何人的帮助。谢谢你。