Размер кнопок не равен в IE и Firefox

Question

У меня есть несколько кнопок на моей странице JSP, и я использую стиль как:

*.buttonblue {
    background-color: #003366;
    border-color: #99CCFF;
    color: #FFFFFF;
    font-family: Verdana,Arial,Helvetica;
    font-size: 8pt;
    font-weight: bold;
    height: 20px; 
    display:inline;
    line-height: 1.2;
    text-align: center; 
         margin-top: 2px; 
}*

В Firefox кнопки немного меньше, чем в IE6. Я не могу определить размер кнопок, так как заголовок изменяет размер кнопки соответственно.

Я пробовал с шириной: авто, но безуспешно. Кроме того, с переполнением: видимые кнопки в IE становятся немного меньше.

Пожалуйста, помогите.

Answer 1

Либо использовать Условные комментарии :

Ex:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Или установите пользовательскую ширину для ввода, читаемого только IE, следующим образом:

    .buttonblue { 
background-color: #003366; 
border-color: #99CCFF; 
color: #FFFFFF; 
font-family: Verdana,Arial,Helvetica; 
font-size: 8pt; 
font-weight: bold; 
height: 20px; 
display:inline; 
line-height: 1.2;
text-align: center; 
margin-top: 2px; 
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}

Теперь вы можете настроить их соответственно

Answer 2

В IE есть ошибка с заполнением кнопки , возможно, вы испытываете это. Попробуйте что-то вроде этого:

input.button {
    padding: 0 .25em;
    width: 0;  /* IE table-cell margin fix */
    overflow: visible;
}

input.button[class] {  /* IE ignores [class] */
    width: auto;  /* cancel margin fix for other browsers */
}

Примечание. Если после применения этого исправления ваши кнопки в IE стали еще меньше, убедитесь, что вы не находитесь в режиме причуд. В режиме причуда IE ширина объектов рассчитывается иначе, чем в стандартном режиме, что делает все немного меньше (для элементов с указанной шириной). Лучше всегда использовать режим стандартов, если вы ожидаете стабильных результатов в разных браузерах (хотя режим стандартов IE не так уж хорош, он все же намного более стандартен, чем режим причуд).

Answer 3

Кнопка отображается, но браузер решает. Вам нужно будет использовать изображение и настроить его так, чтобы оно работало как кнопка, если вы хотите, чтобы оно выглядело одинаково во всех браузерах.