Text in disabled and css styled button shows movement in IE

I have disabled and css styled buttons. In Firefox, disabled buttons do not move at all when pressed (which is what is expected), in IE, the text in the buttons s开发者_运维百科till moves a few pixels.

Why does this happen and more importantly, how do I make disabled styled buttons actually disabled in IE?

It's how this particular browser is implemented. Out of your control.

With web development, it is a good idea not to think pixel-precise, otherwise browser inconsistencies will eventually drive you insane.

You cannot change the browser styles for disabled buttons in IE, but you could wrap your button like this:

<div class="button-wrap">
    <a class="button" disabled="disabled"><span>My button</span></a>
    <span class="visible-text">My button</span>
</div>

Then position and style visible-text as you want preventing that weird movement you say. Something like this:

.visible-text {
    position: absolute;
    cursor: pointer;
    color: green; /* or whatever... */
}

Using visibility: hidden on the default button text keeps the width of the button so you can position there the same text without any problem.

a.button span {
    visibility: hidden;
}

Please try it here:

http://jsfiddle.net/fnwjT/47/

well, a little late but you could set the :active pseudo class for disabled buttons to 0px.

button[disabled]:active{
     top: 0;
}