Setting transparent background on a button isn't working in IE9

Question

I have an ExtJS app where I'm using some toolbars with a background behind them so I'm making the toolbars and the buttons transparent. Some of my users are still stuck on IE9 (I know) and the buttons aren't displaying correctly.

See fiddle here for an example: fiddle

In Chrome, or IE 10+, the toolbar button is transparent. It looks like this:

In, IE9 however, it looks like this:

Fiddle code:

 Ext.onReady(function () {
      var win = Ext.create('Ext.window.Window', {
          layout: 'fit',
          height: 300,
          width: 300,
          autoShow: true,
          tbar: {
              style:'background-color:orange;',
              items: [{
                  text: 'hi',
                  style: 'background:transparent;'
              }]
          },
          html:'some html'
      });
  });

Answer 1

Ext js framework is creating table dom for button for IE9. We can prevent it by giving frame:false & giving the border & padding styles in style config.

frame:false,
style:'background-color:transparent;border:1px solid #d8d8d8!important;border-radius: 3px;padding: 3px!important;' 

Full Code:

  Ext.onReady(function () {
      var win = Ext.create('Ext.window.Window', {
          layout: 'fit',
          height: 300,
          width: 300,
          autoShow: true,
          tbar: {
              style:'background-color:orange;',
              items: [{
                   text: 'hi',
                  frame:false,
                   style:'background-color:transparent;border:1px solid #d8d8d8!important;border-radius: 3px;padding: 3px!important;'
              }]
          },
          html:'some html'
      });
  });

Here is the working example