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參數來實現所需的功能