Question

我有一个ExtJS应用程序，我使用一些背景有背景的工具栏，这样我就可以使工具栏和按钮透明。我的一些用户仍然停留在IE9（我知道）并且按钮没有正确显示。

请点击此处获取示例：fiddle

在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＆amp;给予边界＆amp; 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'
      });
  });

Here 是工作示例

在按钮上设置透明背景并不适用于IE9

1 个答案: