Question

我正在开展一个项目，客户给了我一个使用metronic模板构建的网站。除IE9及更低版本外，该网站在所有浏览器中看起来都不错。

我的application.css.scss

@import 'bootstrap';
@import 'font-awesome';
@import 'static/css/style-metronic';
@import 'static/css/style';
@import 'static/css/style-responsive';
@import 'static/css/plugins';
@import 'static/css/themes/default';
@import 'static/plugins/uniform/css/uniform.default';
@import 'static/css/pages/login';
@import 'static/plugins/data-tables/DT_bootstrap';
@import 'static/plugins/select2/select2_metro';
@import 'static/plugins/dropzone/css/dropzone';
@import 'static/plugins/bootstrap-datepicker/css/datepicker';
@import 'static/plugins/bootstrap-timepicker/compiled/timepicker';
@import 'static/plugins/bootstrap-datetimepicker/css/datetimepicker';

当我删除style-metronic（第3行）时，页面被正确呈现。所以我开始删除style-metronic.css中的每一个样式。最后我发现下面的css是有问题的代码。

.btn.yellow:hover,
.btn.yellow:focus,
.btn.yellow:active,
.btn.yellow.active,
.btn.yellow.disabled,
.btn.yellow[disabled] {
  background-color: #eca22e !important;
  color: #fff !important;
  outline: none !important;
}

如果我删除

.btn.yellow.active,
.btn.yellow.disabled,
.btn.yellow[disabled]

从最后一个css选择器中正确呈现页面。但即使我添加了.btn.yellow.active，我的页面也会再次中断。我的问题是IE9中的上述css选择器有什么问题以及如何修复它？

Answer 1

.btn.yellow[disabled]

我猜测IE需要与属性选择器关联的值才能理解它。这当然假定您的HTML包含该属性的值。例如：

.btn.yellow[disabled='true']

Answer 2

对于旧版本的IE，您需要使用polyfill来支持最新版本的CSS。

我已成功使用WebShims。

Modernizr对于任何浏览器需求都有huge list of polyfills。

IE9中的CSS中断

2 个答案: