javascript - Extjs - グリッド列がクロムのグリッド ヘッダーと整列しない

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 がこのグリッドを奇妙にレンダリングする理由について、どなたかの助けをいただければ幸いです。ありがとうございました。