在按鈕上設置透明背景在IE9中不起作用

Question

我有一個ExtJS應用程序，我正在使用一些背景背景的工具欄，所以我正在使工具欄和按鈕透明。 我的一些用戶仍然停留在IE9（我知道）並且按鈕顯示不正確。

在這里看一個例子： 小提琴

在Chrome或IE 10+中，工具欄按鈕是透明的。 它看起來像這樣：

在IE9中，它看起來像這樣：

小提琴代碼：

 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框架正在為IE9的按鈕創建表dom。 我們可以通過給出frame:false並在style配置中給出邊框和填充樣式來阻止它。

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

完整代碼：

  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'
      });
  });

這是工作示例