CODEWITHSUNDEEP
htmlcssinternet-explorer
Tim
Tim

Reputation: 3816

Prevent <button> from shifting during click in IE

When you have a simple element in a page and click it (hold down the mouse during click to see the effect) in IE8/9 then the button shifts a little down and to the right.

I'm assuming this is part of the default IE style. Is there anyway to prevent this behavior?

http://jsfiddle.net/tmcconechy/hqm59/

Upvotes: 26

Views: 20640

Answers (4)

Renaat De Muynck
Renaat De Muynck

Reputation: 3347

If you don't mind using JavaScript, apparently this does the trick:

$(document).on('mousedown', 'button, input[type="button"], input[type="submit"]', function(e) {
  e.preventDefault();
});

Upvotes: -2

teefars
teefars

Reputation: 612

Put your text on a <span> and position:relative in it, it'll fix.

button span{
    position: relative;
}

No need for top and left definition.

Upvotes: 19

user3144038
user3144038

Reputation: 401

You can stop the text moving in IE button:

button:active span, button:focus span {
    position:relative;
    top: 0;
    left: 0;
}

<button><span>no move</span></button>

http://jsfiddle.net/dQVA7/

Upvotes: 25

Mark Hulbrock
Mark Hulbrock

Reputation: 99

You can apply some styles to the button. button{ margin: 0px; padding: 0px;}

Upvotes: 1

Related Questions