在按钮上设置透明背景在 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 的按钮创建 table dom。我们可以通过在 style config.

中提供 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 是工作示例

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

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

javascript

css

extjs

internet-explorer-9