Ext spacer width on different browser

[lennae24]

I have a buttons aligned horizontally and I put a spacer between buttons, it runs on firefox and chrome smoothly. But when i run it on IE, there are buttons that overlaps. How should I change it?
Thanks in advance
sensha.jpg

var homeForm = new Ext.Panel({
        renderTo: document.body,
        layout: 'form',
        frame: true,
        bodyStyle: 'position:relative;',
        style: {
            'margin-top': '5%',
            'margin-left': '5%',
            'margin-right': '5%'
        },
        autoWidth: true,
        labelWidth: 70,
        defaultType: 'button',
        buttonAlign: 'center',
        height: 300,                    
        items: [
                        new Ext.Container({
                width: 1230,
                height: 100,
                layout: {
                    type: 'hbox',
                       align: 'middle',
                    pack: 'center'
                },
                items: [
                    buttonPlatlist,
                    {
                        xtype:'spacer',
                        width:'20px'
                    },
                    buttonAP,
                    {
                        xtype:'spacer',
                        width:'20px'
                    },
                    buttonMatrix,
                    {
                        xtype:'spacer',
                        width:'20px'
                    },
                    buttonOutput,
                    {
                        xtype:'spacer',
                        width:'20px'
                    },
                    buttonSectional
                ]
            })
        ]