问题
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
回答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]-->
来源：https://stackoverflow.com/questions/18311480/how-to-fix-extjs-scoped-css-for-ie