Input type = отправить текстовое вертикальное выравнивание в Firefox

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

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

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

_{(источник: muonlab.com)}

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

Спасибо

<div class="buttons">
    <a href="#" class="button btn-small-grey">&laquo Back</a>
    <input type="submit" class="button btn-large-green" value="Save changes" />
</div>

.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);
}

Ответ 1

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

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

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

Ответ 2

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

В FF Text обычно немного ниже, точно так же, как на прикрепленном изображении, и поэтому я просто применяю "padding-bottom" на самой кнопке. Он перемещает текст на число кнопок пикселей вверх.

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

<input type="submit" value="SEARCH" class="search"/>

и 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, и все выше перемещает текст на несколько пикселей вверх. Так что это означает больше (бесконечно?), Насмехаясь над пропиской сверху/снизу. Я потерял терпение сейчас, хотя, и я думаю, что теперь я буду вкладывать все это в отдельную таблицу стилей, пока я не найду довольно легкое и универсальное решение для всего этого

Ответ 3

Входы отформатированы не в соответствии с соглашением модели коробки 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;
}

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

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

Ответ 4

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

EDIT: Я думаю, что нет кросс-браузерного решения, потому что проблема связана с текстовым рендерингом браузеров. Чтобы полностью решить проблему, вы можете нарисовать фоновый img с текстом и применить это изображение к ссылке или к кнопке. Даже если с этим решением вы теряете доступность.

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

Ответ 5

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