тип ввода = отправить текст вертикального выравнивания в Firefox

я пытаюсь стилизовать мои кнопки формы, и яу меня проблема в Firefox, что я могудойти до сути ...

Я хочу, чтобы стиль определенно<a></a>с иs, чтобы выглядеть одинаково (у меня есть фоновое изображение кнопки, использующее технику раздвижных дверей, чтобы применить эффект наведения.)

Все это прекрасно работает, за исключением Firefox, текст ввода ввода немного ниже, чем должно быть. IE и Safari / Chrome работают нормально.

альтернативный текст http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png

У кого-нибудь есть идеи?

Спасибо


    <a href="#" class="button btn-small-grey">« Back</a>
    


.button
{
    cursor: pointer;
    border: 0;
    background-color: #fff;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    outline: 0;
    font-family: Arial, Verdana, Sans-Serif;
}

a.button
{
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    padding: 5px 0 0 0;
    height: 22px;
    margin-right: 1em;
}

.btn-small-grey
{
    height: 27px;
    width: 96px;
    background-position: 0 -81px;
    background-image: url(/assets/images/buttons/buttons-small.gif);
}

.btn-large-green
{
    height: 27px;
    width: 175px;
    background-position: 0px -54px;
    background-image: url(/assets/images/buttons/buttons-large.gif);
}
 Andrew Bullock05 нояб. 2009 г., 12:59
Я единственное, что относится к этим элементамmargin: 0; padding: 0;
 Emily05 нояб. 2009 г., 12:55
Вы используете сброс CSS? Если да, то какой?

Ответы на вопрос(5)

Вы также можете рассмотреть возможность замены кнопки другим элементом. Якорный элемент работает отлично. Просто добавьтеОтправить' функция этопо щелчку' событие и тыбудет хорошо идти Я думаю, что это лучшее (и более простое) кросс-браузерное решение.

Решение Вопроса

Я нашел этот пост, потому что я решил эту проблему несколько месяцев назад, и когда я столкнулся с ним сегодня, я не могне помню, что яЯ сделал. Ницца. Пролистав мой CSS, я, наконец, нашелисправить», Я могу'не возьмите кредит, потому что я где-то нашел его в Интернете, но, надеюсь, он будет для вас таким же полезным, как и для меня:

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

Надеюсь, это поможет.

 Shelly Skeens04 февр. 2010 г., 15:46
Да, это на какое-то время сводило меня с ума. Я'Я счастлив передать это!
 Jeaf Gilbert08 нояб. 2010 г., 04:55
Спасибо, хорошо работает для кнопки (button::-moz-focus-inner).
 Sander22 мар. 2012 г., 11:45
Эти ответы - вот почему я люблю переполнение стека. Бесконечно благодарен ;)
 Andrew Bullock02 янв. 2010 г., 22:36
oO я попробую это в понедельник, хороший
 Andrew Bullock20 окт. 2011 г., 00:10
все еще помогает мне :)
 Jez04 февр. 2013 г., 11:49
Это просто сработало для меня. Интересно, почему Gecko по умолчанию отображает кнопки немного иначе, чем в других основных браузерах? Это должно быть установлено по умолчанию.
 Hoang Huynh31 окт. 2013 г., 19:14
Спасибо, это спасает мой день! Работает для всех элементов управления HTML (ввод, кнопка и выберите).
 Sophie Alpert28 июл. 2011 г., 00:23
Круто, спасибо! : D
 jedierikb10 июл. 2015 г., 21:49
более надежный CSS для обработки большего количества случаев здесь:css-tricks.com/forums/topic/button-padding-issue
 Shelly Skeens20 окт. 2011 г., 17:51
я тоже, верьте или нет :)
 Chris Parton09 июл. 2012 г., 08:28
Спасибо за это, выспасатель!
 Siewers02 февр. 2010 г., 13:16
Это, пожалуй, самое простое решение проблемы, которую я когда-либо видел! Большое спасибо! Мои кнопки не выглядят одинаково в IE7, IE8, Firefox 3.6 и Chrome. Я добавил дополнительный стиль для тега кнопки, который я использую для кнопок с прикрепленными значками.
 Andrew Bullock02 февр. 2010 г., 13:26
aceness! работает хорошо

У меня была такая же проблема, и яМы решили (только для FF и Safari), зафиксировав ширину, но не высоту, и поиграв со значениями: отступ (сверху и снизу), высотой строки и, если необходимо, установив вертикальное выравнивание по середине. Однако все это вышлоЭто проще сделать, если вы установите все значения (даже размер шрифта) в пикселях.

РЕДАКТИРОВАТЬ: Я думаю, что нетt кросс-браузерное решение, потому что проблема связана с отображением текста браузерами. Чтобы полностью решить проблему, вы можете нарисовать фоновое изображение с текстом и применить это изображение к ссылке или кнопке. Даже если с этим решением вы потеряете в доступности.

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

 Andrew Bullock05 нояб. 2009 г., 12:50
хотя я мог пропустить волшебную комбинацию, яЯ обнаружил, что игра со всеми этими вещами вызывает еще одну проблему в другом браузере, и я просто преследую их навсегда!

Входные данные отформатированы не в соответствии с соглашением о блочной модели W3 в разных браузерах. Возможно, вы захотите включить:

input /*Content follows box model*/
{ 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

    height:24px;
}

Также включите для Firefox (который указал Шелли):

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

В противном случае вы можете использовать кнопку

Я собрал все эти решения из разных источников, они заслуживают похвалы

У меня та же проблема каждый раз, когда мне нужно стилизовать кнопки формы. Извините, довольно занят на данный момент, поэтому только краткое описание, как я обычно это исправляю.

В FF Text обычно немного ниже, точно так же, как на картинке, которую вы прикрепили, и поэтому я просто применяю "набивка дно» на самой кнопке. Перемещает текст на кнопку на количество пикселей вверх.

Проблема в том, что он также перемещает текст в IE, и теперь IE выглядит немного не так. Чтобы исправить это я применяювысота линии" на ту же кнопку с точно таким же значением, как высота кнопки. Это заставляет IE полностью игнорировать заполнение и размещает текст прямо посередине. Ниже приведен пример HTML-кода:


и CSS:

.search
{
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
    height: 29px;
    width: 104px;   
    border: 0; 

    /* centering text on button */
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
    padding-bottom: 2px; /* IE will ignore but works for FF */
}

Прости я неЯ применил это непосредственно к вашему коду, но яЯ немного занят в данный момент, надеюсь, у вас есть идея, и это помогает.

пс. только что проверил в IE8 и все выше перемещает текст на несколько пикселей вверх. Так что это означает больше (бесконечность?) Насмешек с подкладкой сверху / снизу ... Хотя сейчас я потерял терпение и думаю, чтоТеперь я буду помещать все это в отдельную таблицу стилей, пока я не найду довольно простое и универсальное решение для всего этого.

 Andrew Bullock23 нояб. 2009 г., 16:20
ха! победа! хороший :)
 Ethan26 авг. 2013 г., 11:35
@spirytus Это хорошая идея для FF, но она выдвигает текст для Chrome. Как вы выборочно применяете это к FF?

Ваш ответ на вопрос