如何修复ExtJS scoped CSS for IE？ [英] How to fix ExtJS scoped CSS for IE?

问题描述

我使用的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论坛 :)但我还是不知道该怎么办：（

---

编辑

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

  .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 
  

解决方案>

 我想如果你不想重新编译整个CSS使用不同的CSS文件的IE浏览器如下。 
 
<！ -  [if IE 7.0]>< link href =css / ie7.csstype =text / cssmedia =screen =stylesheet/ ><！[endif]  - > 
<！ -  [if IE 8.0]>< link href =css / ie8.csstype =text / cssmedia =screen =stylesheet/& ！[endif]  - > 
<！ -  [if IE 9.0]>< link href =css / ie8.csstype =text / cssmedia =screen =stylesheet/& ！[endif]  - > 
  

I'm using ExtJS 4.1.1 and some components don't display as expected in IE7. I checked ext-all-scoped.css and I noticed that these two classes .x-reset .x-ie do not appear in the right order, so the styles are not applied. I thought I could simply replace this string with the right one (.x-ie .x-reset) but there are many different cases such as .x-reset .x-strict .x-ie7, .x-reset .x-quirks .x-ie8 and so on all along the file. Thereby, I'd rather like recompile the entire CSS file. Does someone know how to proceed?

I'm not alone anymore : Sencha forum :) but I still don't know what to do :(

---

Edit

I'm not proud of it but I have finally decided to perform automatic replacement over every broken selector. At first glance it seems like my problem has been resolved. Below you can see a list of all replacements I have made (IE only). If you want to do the same, don't forget to include extra spaces on both sides of each line, this will prevent you from breaking combinations of selectors like .x-some-class.x-reset. Please notice that it's a dirty and temporary solution which may cause unexpected bugs, you should try a more standard way instead.

 .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 

解决方案

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]-->

这篇关于如何修复ExtJS scoped CSS for IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！