IE8上的CSS兼容性问题

我们正在重新设计基于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上：

我们想知道这是否是一个已知的问题，是否有一个特定的处理，使我们能够处理这种需求

---

提前感谢。

您上面评论中的元素是错误的元素-这是按钮的内部元素；您希望类的id类似于

button-1009

（它将是层次结构中一些元素的锚或div标记）

至于为什么它不起作用——将会有多个CSS选择器来定义背景颜色。ExtJS中的默认值是

x-btn-default-large

。该属性的完整CSS类类似于

x-btn buttonCls x-unselectable x-btn-default-large x-border-box

这样做后，

按钮cls

和

x-btn-default-large

都是同样有效的选择-浏览器必须选择一个来使用。IE8选择了最后一个；其他浏览器正在选择第一个。两者都没有错——代码中存在歧义

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

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

---

这适用于具有

buttonCls

cls属性的按钮（这将是唯一具有

x-btn

componentCls属性的东西）；您希望类的id类似于

button-1009

（它将是层次结构中一些元素的锚或div标记）

至于为什么它不起作用——将会有多个CSS选择器来定义背景颜色。ExtJS中的默认值是

x-btn-default-large

。该属性的完整CSS类类似于

x-btn buttonCls x-unselectable x-btn-default-large x-border-box

这样做后，

按钮cls

和

x-btn-default-large

都是同样有效的选择-浏览器必须选择一个来使用。IE8选择了最后一个；其他浏览器正在选择第一个。两者都没有错——代码中存在歧义

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

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

---

这适用于具有

buttonCls

cls属性的按钮（只有这些按钮具有

x-btn

componentCls属性）。

问题在于JavaScript语法

IE8和早期版本对数组和对象的尾随逗号要求严格

行

renderTo:Ext.getBody（），

以逗号结尾，但它是对象中的最后一项。在IE8中，这将无法编译

解决办法就是去掉那个逗号

---

您可以通过JSHint或ESLint之类的linting工具运行代码来关注这类事情，如果出现问题，它会标记这类事情。

问题在于JavaScript语法

IE8和早期版本对数组和对象的尾随逗号要求严格

行

renderTo:Ext.getBody（），

以逗号结尾，但它是对象中的最后一项。在IE8中，这将无法编译

解决办法就是去掉那个逗号

---

您可以通过JSHint或ESLint之类的linting工具运行代码，随时关注这类问题。如果出现问题，该工具将标记这类问题。

Sencha支持团队的答案：

---

这为我澄清了很多，它可能会帮助您：）

Sencha支持团队的答案：

---

这对我来说很清楚，它可能会帮助你：）

你能用html显示输出吗？btn这是firebug的外观。html标记没有类“btnColor”。尝试在span中添加“btnColor”类。它没有“btnColor”，因为它是错误的标记；相关的标记将在层次结构中向上几级。您可以用html显示输出吗？btn这是firebug的外观。html标记没有“btnColor”类。尝试在span中添加“btnColor”类。它没有“btnColor”，因为它是错误的标记；相关的标记将在层次结构的上几层。鉴于他确实看到了一个按钮，我怀疑无关的逗号只是准备示例的一个人工制品。感谢您的回答，我删除了逗号，但仍然存在相同的问题。鉴于他确实看到了一个按钮，我怀疑多余的逗号只是准备示例的一个人工制品。谢谢你的回答，我删除了逗号，但仍然存在相同的问题。谢谢你的回答，我尝试了你的方法它在firefox上有效，而不是在ie8上。谢谢你的回答，我尝试了你的方法它在firefox上有效，而不是在ie8上。