CSS breaks in IE9

Question

I am working on a project where a client has given me a website built using metronic templates. The website looks good in all browsers except IE9 and lower.

My 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';

When I removed style-metronic (3rd line) the page got rendered properly. So I started by removing each and every style in style-metronic.css. And finally I found that the below css is the problematic code.

.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;
}

If I remove

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

from the last css selector the pages gets rendered properly. But even if I add .btn.yellow.active my page breaks again. My question is what is wrong with the above css selectors in IE9 and how to fix it?

Answer 1

.btn.yellow[disabled] 

I'm guessing that IE needs a value associated with the attribute selector in order to understand it. This of course assumes that your HTML includes a value for that attribute. example:

.btn.yellow[disabled='true']

Answer 2

You need a polyfill for older versions of IE to support the latest version of CSS.

I have used WebShims successfully.

Modernizr has a huge list of polyfills for any browser need.