Question

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 still moves a few pixels.

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

Answer 1

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.

Answer 2

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/

Answer 3

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

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

友情链接