Home/ Questions/Q 9020887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:07:38+00:00

IE9 seems to make disabled buttons really f0rking uggly using Twitter Bootstrap. The button

  • 0

IE9 seems to make disabled buttons really f0rking uggly using Twitter Bootstrap. The button text becomes blurry and I cannot find any way to remove this blur or even reset to the default IE9 button look..

IE9 bootstrap disabled button text rendering problem

The best solution would be if someone could solve this font/blur rendering problem. If this is not possible I would like to have the default IE9 button look and feel since this is at least readable.

I’m not looking to download any patch or just fix this in just my own browser!

I’ve attempted to reset the IE9 button look but for some reason this seems impossible. The color of the text becomes grey with what looks like an ugly old IE filter on it.

IE9 bootstrap button reset not working

I’ve included a LT IE10 stylesheet in the end of <head>

<!--[if lt IE 10]><link rel="stylesheet" type="text/css" href="css/ie9.css" media="screen" /><![endif]-->

with the following css:

.btn.disabled,
.btn[disabled] {
    background: 0;
    background-color: #a9a2a1;
    opacity: 1;
    filter: none !important;
    text-shadow: none !important;
    -ms-color: #000000 !important;
    color: #000000 !important;
    zoom: 1;    
}
input:-ms-input-placeholder {
    color: black !important;
}

still the text is grey and the button looks like the gray one above…

My solution:

Thanks to Emily’s answer I made a hack:

#sok.btn.disabled,
#sok.btn[disabled] {
    opacity: 1;
    font-size: 0;
    background-image: url('image.jpg');
    width: 48px;
}

All other css rules can be left alone

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The bootstrap guys do mention this on their github page, and they don’t currently have a way of fixing it. It’s an issue with IE9 only as it overrides their code, and anyone else’s. There isn’t currently a way of fixing this, although I suppose you could experiment with creating a disabled button image, and using a higher z-index to put it over the top of the nasty-looking button, although that is probably a fair amount of hassle… Hope that helps.

    • 0