IE 8上的CSS兼容性问题(CSS compatibility issues on IE 8)

IE 8上的CSS兼容性问题(CSS compatibility issues on IE 8)

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

CSS类可与所有主要Web浏览器（Firefox，IE11，Chrome ...）完美协同工作，但有些不在IE8上。

这是一个在IE8下不能正常工作的例子：

Ext.create('Ext.button.Button',{ text:'Button Test', cls: 'btnColor', renderTo: Ext.getBody(), }); .btnColor { background-color: green; border-color:green; }

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

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

先谢谢你。

We are working on redesigning our web-based application’s Front-end. We started with a PoC based on Extjs 6 and we are facing few compatibility issues. These compatibility issues are related to IE8 and CSS, while it is mentioned on your website that Extjs6 is fully compliant with IE8.

CSS classes work perfectly with all Major Web Browsers (Firefox, IE11, Chrome...) but some do not on IE8.

This is an example of CSS not working properly under IE8:

Ext.create('Ext.button.Button',{ text:'Button Test', cls: 'btnColor', renderTo: Ext.getBody(), }); .btnColor { background-color: green; border-color:green; }

Works on IE11 : But not on IE8 :

We would like to know if this is a known issue and is there a specific processing which allows us to handle this kind of needs.

Thank you in advance.

最满意答案

上面注释中的元素是错误的元素 - 这是按钮的内部元素; 你想要一个类似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属性的东西）。

The answer of Sencha support team:

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

This clarified a lot for me, it might help you :)