CSS IE 8 的兼容性问题

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

您上面评论中的元素是错误的元素 - 那是按钮的内部元素；你想要 class 的 id 类似于 button-1009（它将是一个锚点或 div 标记层次结构中的一些元素）。

以及为什么它不起作用 - 将有多个 CSS 选择器来定义背景颜色。来自 ExtJS 的默认值将是 x-btn-default-large。属性的完整 CSS class 将类似于 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;
}

这适用于具有 buttonCls cls 属性的按钮（这将是唯一具有 x-btn 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

这对我来说很清楚，可能对你有帮助:)

CSS IE 8 的兼容性问题

CSS compatibility issues on IE 8

css

internet-explorer-8

extjs6

extjs6-classic