Question

我们正在努力重新设计基于网络的应用程序的前端。我们从基于Extjs 6的PoC开始，我们面临的兼容性问题很少。这些兼容性问题与IE8和CSS有关，而在您的网站上提到Extjs6完全符合IE8。

CSS类与所有主要Web浏览器（Firefox，IE11，Chrome ...）完美配合，但有些不适用于IE8。

这是CSS在IE8下无法正常工作的示例：

  Ext.create('Ext.button.Button',{
                text:'Button Test',
                cls: 'btnColor',
                renderTo: Ext.getBody(),
      });

  .btnColor {
        background-color: green;
        border-color:green;
   }

适用于IE11：但不是在IE8上：

我们想知道这是否是一个已知问题，是否有一个特定的处理方式可以让我们处理这类需求。

提前谢谢。

Answer 1

上面评论中的元素是错误的元素 - 它是按钮的内部元素;你希望这个类的id类似于button-1009（它将成为一个锚点或div标签，在层次结构中有几个元素）。

至于它为什么不起作用 - 将会有多个CSS选择器定义背景颜色。来自ExtJS的默认值为x-btn-default-large。该属性的完整CSS类将类似x-btn buttonCls x-unselectable x-btn-default-large x-border-box。

就这样，buttonCls和x-btn-default-large都是同样有效的选择 - 浏览器必须选择一个才能使用。 IE8正在挑选最后一个;其他浏览器正在挑选第一个。两者都没有错 - 模糊性在你的代码中。

要修复它，请使CSS选择器更具体。尝试：

.x-btn.buttonCls {
  background-color: green;
  border-color:green;
}

这适用于具有x-btn cls属性的按钮（具有buttonCls componentCls属性的唯一内容）。

Answer 2

问题是JavaScript语法。

IE8及更早版本对数组和对象上的逗号尾随严格。

您的行renderTo: Ext.getBody(),以逗号结尾，但是该对象中的最后一项。在IE8中，这将无法编译。

解决方案就是删除该逗号。

你可以通过像JSHint或ESLint这样的linting工具运行你的代码来关注这些事情。如果事情发生的话，这会标记这种情况。

Answer 3

Sencha支持团队的答案：

https://www.sencha.com/forum/showthread.php?305980-CSS-compatibility-issues-on-IE-8.&p=1118734#post1118734

这为我澄清了很多，它可能对你有所帮助:)

IE 8上的CSS兼容性问题

3 个答案: