CODEWITHSUNDEEP
csstwitter-bootstrapinternet-explorer-9
OZZIE
OZZIE

Reputation: 7378

IE9 Rendering issue with Bootstrap buttons

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

Upvotes: 4

Views: 3457

Answers (2)

xelilof
xelilof

Reputation: 456

you will need to add following style in case of IE 9,

in your HTML :

<!--[if gte IE 9]>
 <link href="/bootstrap/i9_btn_fix.css" rel="stylesheet" type="text/css"  />
<![endif]-->

i9_btn_fix.css : 

.btn.disabled:before,
.btn.disabled:after{
     cursor: default;
     background-image: none;
     opacity: 0.65;
     filter: alpha(opacity=65);
     -moz-box-shadow: none;
     box-shadow: none;
   }

Upvotes: 2

ecs
ecs

Reputation: 718

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.

Upvotes: 3

Related Questions