Неровные края кнопок в Internet Explorer

Question

Как убрать зубчатые края с широкой кнопки в Internet Explorer? Например:

Answer 1

Вы также можете отказаться от стиля кнопок Windows XP (и любой другой версии Windows), установив background-color и / или border-color на свои кнопки.

Попробуйте следующие стили:

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

Вы, конечно, можете сделать это намного приятнее для глаз. Но вы меня поняли:)

Переполнение стека использует этот подход.

Answer 2

В качестве обходного пути вы можете удалить пробелы на каждом конце кнопки, что приведет к уменьшению зубчатых краев. Это достигается с помощью следующего CSS и немного 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

Установка 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 все, кроме текста кнопки, исчезнет.

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

Подробнее о кнопках для стиля:

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

Answer 4

Вы можете изменить стиль рамки кнопки с помощью 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 5

Не слишком много вы можете с этим поделать, но хорошая новость в том, что это исправлено в IE8

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