Chrome中的extJs按钮图像

Question

在 CSS 方面，Chrome 似乎正在成为新的 IE ~~`

我有以下代码用于在手风琴中创建 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 class 的适当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 参数来实现你需要的