Chrome中的extJs按钮图片

Question

当涉及CSS ~~`时，Chrome似乎正在成为新的IE。

我有以下代码用于在acordion中创建extjs按钮：

                var button = Ext.create('Ext.Button', {
                    text: '<img src="'+resp.sellers.external[key].catalogs[0].logo+'">',
                    handler: function() {
                        openOciCall(resp.sellers.external[key].catalogs[0].catId, me.queryFilterManager.getValue())
                    },

                    margin: '3 3 0 3',

                });

现在在FF和IE中，一切看起来都像这样：

但是在没有height属性的Chrome中，它看起来像废话：

更糟糕的是，当我添加Height属性时，我最终得到以下结果：

                var button = Ext.create('Ext.Button', {
                    text: '<img src="'+resp.sellers.external[key].catalogs[0].logo+'">',
                    handler: function() {
                        openOciCall(resp.sellers.external[key].catalogs[0].catId, me.queryFilterManager.getValue())
                    },

                    height: 55,
                    margin: '3 3 0 3',

                });

这让我这样：

问题是ExtJs在Chrome中生成了填充值，从而使图像失真。

<span id="button-1128-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on" style="line-height: normal; padding-top: 27px;"><img src="logos/logo_mercateo.png"></span>

现在我的问题是，是否有更好的方法可以使图像像在Firefox中那样显示？

编辑：

当我尝试通过图标元素使它得到：

Answer 1

在按钮上显示图像的更好方法是使用Button类可用的适当icon参数：

 var button = Ext.create('Ext.Button', {
                    text: ' ',
                    iconCls:'btImage',
                    handler: function() {
                        openOciCall(resp.sellers.external[key].catalogs[0].catId, me.queryFilterManager.getValue())
                    }   
                    ...

                });

必要的CSS：

btImage {
background-image: url(/images/logo.png) !important;
}

注意：我尚未测试代码。但是您可以使用icon，iconCls，iconAlign参数来实现所需的功能