2013-08-19 4 views
0

У меня есть кнопка html с CSS ниже.Выравнивание кнопок не соответствует FF?

.myButton{ 
    background: url("../images/button.png") no-repeat top left; 
    height: 21px; 
    width: 78px; 
    text-align: center; 
    color: #696969; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    border: medium none white; 
} 

Это хорошо проявляется в IE. Но в Fire Fox он не отображает текст в центре. Это делает, как показано ниже:

enter image description here

Как выровнять текст в центр в FF. В IE это правильно?

+1

Вы можете установить скрипку – Amit

+0

Возможно, ширина кнопки больше, чем фоновое изображение, попробуйте фон: url ("../ images/button.png") no-repeat 50% 0; –

+0

Этот CSS будет отображать текст по центру. Если это неверно, значит, у вас есть другой CSS, влияющий на результат. – Jon

ответ

0

Я изменил background: url("../images/button.png") no-repeat top left на фоне: url("../images/button.png") no-repeat top center и работает нормально ....

0

Там должен быть дополнительный CSS код, который относится к кнопке. Только с данной CSS кнопка выглядит иначе: http://jsfiddle.net/xQmHA/

<button class="myButton">TEST</button> 

Вы можете проверить, какие правила стиля применяются к кнопке внутри Firefox (F12 -> CSS -> Выберите кнопку)

0

Попробуйте это ,

 .myButton{ 
      padding:0; 
      background: url("../images/button.png") no-repeat top left; 
      height: 21px; 
      line-height: 21px; 
      width: 78px; 
      text-align: center; 
      color: #696969; 
      font-family: Arial,Helvetica,sans-serif; 
      font-size: 11px; 
      border: medium none white; 
      outline:0 none; 
    } 

Перед добавлением стилей вам необходимо сбросить таблицу стилей по умолчанию любого браузера. В этом случае я подозреваю, что это дополнение, которое по умолчанию добавлено FF/IE, что делает его неработоспособным для вас.

Подходящий стиль стирки для Элемента, прежде чем вы добавите свой собственный.