IE 8 上的 CSS 兼容性问题答案

【问题标题】：CSS compatibility issues on IE 8IE 8 上的 CSS 兼容性问题
【发布时间】：2015-10-16 14:20:01
【问题描述】：

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

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

提前谢谢你。

【问题讨论】：

你能给我看看 html 的输出吗？
btn 这就是 firebug 的样子。
html 标签没有类“btnColor”。尝试在您的跨度中添加“btnColor”类。
它没有'btnColor'，因为它是错误的标签；相关标签将在层次结构中向上几级。

标签： css internet-explorer-8 extjs6 extjs6-classic

【解决方案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;
}

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

【讨论】：

感谢您的回答，我尝试了您的方法，它适用于 Firefox 而不是 ie8。

【解决方案2】：

问题在于 JavaScript 语法。

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

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

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

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

【讨论】：

鉴于他确实看到了一个按钮，我怀疑多余的逗号只是准备示例的人工制品。
感谢您的回答，我删除了逗号，仍然有同样的问题。

【解决方案3】：

煎茶支持团队的回答：

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

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

【讨论】：