1

我们正在重新设计我们基于 Web 的应用程序的前端。我们从基于 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： 在此处输入图像描述

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

先感谢您。

4

3 回答 3

0

您上面评论中的元素是错误的元素 - 那是按钮的内部元素；您希望该类的 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;
}

这适用于具有cls 属性的按钮（这将是唯一具有x-btncomponentCls 属性的东西） 。buttonCls

于 2015-10-16T21:32:23.150 回答
0

问题在于 JavaScript 语法。

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

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

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

您可以通过 JSHint 或 ESLint 之类的 linting 工具运行您的代码来密切关注这些事情，如果事情发生，它们会标记这种情况。

于 2015-10-16T21:39:55.153 回答
0

Sencha支持团队的回答：

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

这对我来说澄清了很多，它可能会帮助你:)

于 2015-10-22T10:00:12.120 回答