如何为 IE 修复 ExtJS 范围的 CSS？

Posted 2023-02-26

【中文标题】如何为 IE 修复 ExtJS 范围的 CSS？

【英文标题】：How to fix ExtJS scoped CSS for IE?

【发布时间】：2013-08-19 10:24:11

【问题描述】：

我正在使用 ExtJS 4.1.1，并且某些组件在 IE7 中无法按预期显示。我检查了ext-all-scoped.css，我注意到.x-reset .x-ie 这两个类没有以正确的顺序出现，因此没有应用样式。我想我可以简单地用正确的字符串 (.x-ie .x-reset) 替换这个字符串，但是文件中有许多不同的情况，例如 .x-reset .x-strict .x-ie7、.x-reset .x-quirks .x-ie8 等等。因此，我宁愿重新编译整个 CSS 文件。有人知道如何进行吗？

我不再孤单 :Sencha forum :) 但我仍然不知道该怎么办 :(

---

编辑

我并不为此感到自豪，但我最终决定对每个损坏的选择器执行自动替换。乍一看，我的问题似乎已经解决了。您可以在下面看到我所做的所有替换的列表（仅限 IE）。如果你想做同样的事情，不要忘记在每一行的两边都包含额外的空格，这将防止你破坏像.x-some-class.x-reset 这样的选择器组合。请注意，这是一个肮脏的临时解决方案，可能会导致意外错误，您应该尝试a more standard way。

 .x-reset .x-quirks .x-ie9p // broken
 .x-quirks .x-ie9p .x-reset // fixed

 .x-reset .x-quirks .x-ie 
 .x-quirks .x-ie .x-reset 

 .x-reset .x-quirks .x-ie7 
 .x-quirks .x-ie7 .x-reset 

 .x-reset .x-quirks .x-ie8 
 .x-quirks .x-ie8 .x-reset 

 .x-reset .x-quirks .x-ie9 
 .x-quirks .x-ie9 .x-reset 

 .x-reset .x-strict .x-ie7m 
 .x-strict .x-ie7m .x-reset 

 .x-reset .x-strict .x-ie6 
 .x-strict .x-ie6 .x-reset 

 .x-reset .x-strict .x-ie7 
 .x-strict .x-ie7 .x-reset 

 .x-reset .x-strict .x-ie8 
 .x-strict .x-ie8 .x-reset 

 .x-reset .x-strict .x-ie9 
 .x-strict .x-ie9 .x-reset 

 .x-reset * html .x-ie 
 * html .x-ie .x-reset 

 .x-reset .x-nbr.x-ie 
 .x-nbr.x-ie .x-reset 

 .x-reset .x-ie7m 
 .x-ie7m .x-reset 

 .x-reset .x-ie8m 
 .x-ie8m .x-reset 

 .x-reset .x-ie6 
 .x-ie6 .x-reset 

 .x-reset .x-ie7 
 .x-ie7 .x-reset 

 .x-reset .x-ie8 
 .x-ie8 .x-reset 

 .x-reset .x-ie9 
 .x-ie9 .x-reset 

 .x-reset .x-ie 
 .x-ie .x-reset 

【参考方案1】：

I think if you don't want to recompile the entire CSS use different CSS file for IE browsers as below.

    <!--[if IE 7.0]><link href="css/ie7.css" type="text/css" media="screen" rel="stylesheet" /><![endif]-->
    <!--[if IE 8.0]><link href="css/ie8.css" type="text/css" media="screen" rel="stylesheet" /><![endif]-->
    <!--[if IE 9.0]><link href="css/ie8.css" type="text/css" media="screen" rel="stylesheet" /><![endif]-->