Internet Explorer Button:Active Inner-Padding

Internet Explorer button:active inner-padding

Update: For IE11+, it can be removed.

No, you can't get rid of it (in old versions of Internet Explorer).

As @Spudley said:

If you don't want that effect, don't use a button element.

If it really matters, then an a element is the only alternative, but it's not really worth switching just to fix this. Users of Internet Explorer are used to it.

Remove extra padding in IE button

You can use reset css as it avoids browser inconsistencies.

Please refer http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css

IE11 shifts button text by some px on :hover and :active

Found a solution on another thread (from this question) !

The solution needs some changes on your code (the input need to be a button element), because we want to use a span inside the button.

button {  width: 200px;  height: 3rem;    background: #10275e;  border: 1px solid white;  color: white;    font-size: 1.2rem;}  button:hover {  color: #10275e;  background: white;}  button:active {  color: white;  background: black;  padding: 0;}
button > span {  position: relative;}

<body style="background:#10275e"><button><span>Press Me</span></button><body>

Remove 3D press effect Internet Explorer button

Had the same problem right now... It's a bit late, so I don't know whether the answer would still be applicable.

My solution was to put the button's text within a span element then set the style to transform: translateY(1px);. And no more unnecessary press effect. I was a bit apprehensive before trying it, as it would mess with FF, Chrome, and Safari for Windows. But weirdly, they seem to ignore it (for now at least). Tested on 28, 27, and 5.1 respectively. Also, I'm using IE 10.

Good luck

Button size wrong in IE

If you want to be sure that your buttons will have the same height across all browsers, you have to set for example height: 2.5em. I used ems because you can easly scale up or down the buttons by changing the size of the font, like font-size: 1.25em.

Here is a full example.

Prevent button from shifting during click in IE

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.

Internet Explorer Button:Active Inner-Padding