javascript - 在按钮上设置透明背景在 IE9 中不起作用

Question

我有一个 ExtJS 应用程序，我在其中使用了一些带有背景的工具栏，因此我将工具栏和按钮设为透明。我的一些用户仍然停留在 IE9(我知道)并且按钮显示不正确。

请参阅此处的 fiddle 示例:fiddle

在 Chrome 或 IE 10+ 中，工具栏按钮是透明的。它看起来像这样:

然而，在 IE9 中，它看起来像这样:

fiddle 代码:

 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。我们可以通过在 style 配置中提供 frame:false 并提供 border & padding 样式来防止它。

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

Here 是工作示例