html - CSS 在 IE9 中中断

Question

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

我的应用程序.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 我的页面也会再次中断。我的问题是上述 CSS 选择器在 IE9 中有什么问题以及如何修复它？

Answer 1

.btn.yellow[disabled] 

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

.btn.yellow[disabled='true']