Jagged Button Edges in Internet Explorer

Question

How to remove jagged edges from a wide button in Internet Explorer? For example:

Answer 1

You can also eliminate the style of Windows XP buttons (and any other version of Windows) by installing background-colorand / or border-coloron your buttons.

Try the following styles:

background-color: black;
color: white;
border-color: red green blue yellow;

You can, of course, make it much more pleasing to the eye. But you get my thought :)

Stack overflow uses this approach.

Answer 2

As a workaround, you can remove the spaces at each end of the button, which reduces the jagged edges. This is accomplished using the following css and a bit of jQuery:

input.button {
   padding: 0 .25em;
   width: 0; /* for IE only */
   overflow: visible;
}

input.button[class] { /* IE ignores [class] */
    width: auto;
}

---

$(function(){
    $('input[type=button]').addClass('button');
});

jQuery . .

Answer 3

CSS, :

/**************************************************************************
 Nav Button format settings
**************************************************************************/
.navButtons
{
    font-size: 9px;
    font-family: Verdana, sans-serif;
    width: 80;
    height: 20; 
    position: relative; 
    border-style: solid; 
    border-width: 1;
}

Answer 4

overflow: visible; IE 6 7.

(. http://jehiah.cz/archive/button-width-in-ie)

• IE 6, display:block; , .

  display:inline; IE 6 .

• , , .

  IE 6, width: 0; . IE 7 .

  (see http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie )

Additional information about styling buttons:

http://natbat.net/2009/Jun/10/styling-buttons-as-links/

Answer 5

Not too much you can do with this, but the good news is that it is fixed in IE8

http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html