Позиция текста в кнопке отправки

Положение текста в кнопке поиска моего блога очень мало в Firefox 4, но не в Chrome 10 или IE9. Я пробовал почти все, и ничего не работает, кроме уменьшения размера шрифта текста, что не является оптимальным решением, так как текст будет слишком маленьким.

Скриншоты

Firefox 4 в Windows 7:

Google Chrome 10.0.648.204 в Windows 7:

Соответствующий HTML:

<form method="get" class="searchform" action="http://eligrey.com/blog"> 
    <input type="search" placeholder="search" name="s" /> 
    <input type="submit" value="&#128269;" title="Search" /> 
</form>

Соответствующее правило CSS (из http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css):

.searchform input[type="submit"] {
    font-family: "rfhb-lpmg";
    color: #ccc;
    font-size: 3em;
    background-color: #959595;
    text-align: center;
    border: 1px solid #888;
    height: 34px;
    width: 42px;
    line-height: 34px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition-property: border, background-color, box-shadow;
    -webkit-transition-duration: 0.2s;
    -moz-transition-property: border, background-color, box-shadow;
    -moz-transition-duration: 0.2s;
}

rfhb-lpmg - это только специальный шрифт, который я создал, который реализует вращающуюся пурпуру с сердечником U + 2767 и лучевое увеличительное стекло U + 1F50E с упрощенными глифами.

Ответ 1

Я понял, что главная проблема - это свойство line-height.

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

Как правило, line-height поможет настроить это, и в Chrome в вашем примере это было успешным. Однако в случае элементов button и input type="submit" Firefox игнорирует высоту линии, поэтому он не может использоваться таким образом, чтобы "зафиксировать" расположение символа. Используя крайний пример ниже, мы можем видеть, что текст был вытеснен из-за нестабильности в Chrome, в то время как он по-прежнему остается в вертикальном центре в Firefox.

<!doctype html>

<html>
<body>
<style type="text/css">
input {
    border:1px solid black; 
    line-height:1000px;
    height:40px;
}
</style>
<input type="submit" value="Test"/>
</body>
</html>

Firefox: Chrome:

Когда элемент кнопки остается в собственном стиле (удалите border), line-height игнорируется обоими браузерами (странно, Chrome также игнорирует высоту, но Firefox не делает этого). Как только кнопка настроена на заказ, Chrome выбирает line-height, но Firefox не делает.

Итак, что вы можете сделать?

Если вы все еще хотите использовать шрифты CSS...

Прежде всего, убедитесь, что ваш шрифт отображает глифы в том же вертикальном выравнивании, что стандартный шрифт отображает основной символ полной высоты, например H. (Похоже, вы сделали это по большей части, так как ваша страница выглядит значительно лучше, чем скриншоты в вопросе.)
Во-вторых, вы заметите, что если вы используете шрифт Arial и отображаете H (с тем же размером шрифта), он также низкий. Это связано с тем, что встроенная стандартная линейная высота шрифта дает ему довольно много места над персонажем. Это означает, что у вас может быть некоторый успех, если вы можете отредактировать шрифт, чтобы обрезать это,, тем самым предоставляя персонажу достаточно места, чтобы не обрезаться в нижней части браузера.
Наверное, менее идеальный для вас, но все же вариант, вы можете использовать другие элементы, либо в комбинации с, либо вместо элемента button/submit, чтобы получить символ на месте.

Альтернативный вариант

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

Учитывая, что польза от грациозной деградации заключается в том, чтобы позволить более простым технологиям отображать ваш сайт без видимых нарушений, использование этого персонажа кажется подозрительным и— без CSS-шрифтов или родного шрифта с этим символом, он будет отображаться как 🔍 a ? или просто пустое поле.

Лучшим вариантом для изящного деградации, учитывая эту проблему, было бы просто использовать фоновое изображение. Сделайте текст кнопки "Поиск", скройте текст (через CSS) и примените фоновое изображение, а затем у вас есть фактическое грациозное ухудшение и необычный характер для лучших браузеров.

Фоновое изображение может также (очевидно, зависящее от самих файлов) иметь другие преимущества, такие как более быстрая загрузка и время рендеринга (например, если разработчик хотел использовать один символ из шрифта с полным набором символов).

Ответ 2

FF4 устанавливает собственные стили для элементов ввода. Вы можете проверить их все, если вы вставляете это в свой URL-адрес:

resource://gre-resources/forms.css

В качестве альтернативы вы можете увидеть эти стили, если вы установите флажок "Показать пользовательский агент CSS из раскрывающегося списка" Стиль ", если у вас установлен Firebug.

Проверьте решение здесь: Как reset стиль кнопки по умолчанию в Firefox 4 +

Ответ 3

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

Упрощенный html:

<div class="searchform">
  <input type="search" placeholder="search" name="s"  />
  <span><input type="submit" value="&#128269;" title="Search" /></span>
</div>

И упрощенная css:

// hide the border and background for the submit button
.searchform input[type="submit"] {
  border: none;
  background: transparent;
}
// give the span the properties that the submit button has now
span {
  position: relative;
  width: 30px; // or whatever
  height: 30px; // or whatever
}
// absolutely position the submit button
.searchform input[type="submit"] {
  position: absolute;
  margin-top: -15px; // half the span height
  margin-left: -15px; // half the span width
  top: 50%;
  left: 50%;
  bottom: 0;
  right: 0;
}

Ответ 4

У меня возникла аналогичная проблема при использовании CSS внутри кнопок. Текст был смещен на 1 пиксель в firefox, а остальная часть браузеров была просто прекрасна. Я использовал свойство "padding", специфичное для Firefox, следующим образом

Исходный код, в котором текст кнопки ввода был на один пиксель ниже в Firefox

.mybutton { 
    height:32px; background-color:green; 
    font-size:14px; color:white; font-weight:bold; 
    border:0px; -moz-border-radius:16px; border-radius:16px;
}

и после добавления специфического дополнения Firefox после вышеупомянутого css, он был идеальным в Firefox

@-moz-document url-prefix() {
    .mybutton { padding-bottom:1px; }
}

В вашем случае вам может понадобиться немного больше padding-bottom и, возможно, padding-top в негативе (-1px или -2px).

Ответ 5

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

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

/* This gets picked up in firefox only to adjust the text into the middle */
@-moz-document url-prefix() {
    input[type="button"],
    input[type="submit"],
    button.btn {
        padding-bottom: 6px;
    }
}

Ответ 6

У меня было что-то подобное раньше на этой неделе - я узнал, что вам нужно применить некоторые элементы ccs к элементу 'parent' вместо "child". Поэтому в основном попробуйте некоторые из CSS, например vertical-align: в div.searchform.

Между тем у меня возникают проблемы с моим знаком поиска на smartemini.com. Он работает в aaaaallllll браузерах, кроме ie9.: (

Ответ 7

Я столкнулся с тем же. Я смог решить свои проблемы, нажав на нижнюю часть (!)

padding: 0 0 2px 0; /* total height: 36px */
height: 34px;

или, если вы хотите, чтобы вы ввели постоянный вход ['..'] и кнопку привязки, используйте полный контроль над последним для полного контроля.

/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL  {
    display: block;
    font-size: 14px;
    line-height: 14px; /* just a precaution, likely ignored in FF */

    padding: 0 0 2px 0; /* total height: 36px */
    height: 34px;   
    ...
}

/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL  {
    padding: 12px 0 0 0; /* total height: 36px */
    height: 24px;
}

(размеры "футболки" приводят к разным смещениям и ширинам фона).

Ответ 8

Что вы видите здесь, так это то, как разные браузеры отображают текст внутри элементов кнопки, когда пространство плотно. Chrome центрирует тест по вертикали, а Firefox - выравнивает его.

Кроме того, вы используете домашний шрифт, который может иметь некоторые скрытые проблемы, когда дело доходит до вертикальной высоты/ведущей/etc.

Я отмечаю, что когда я добавляю любого другого символа в input value - увеличительное стекло падает еще дальше в Firefox. Это говорит о том, что настройка шрифта каким-то образом (например, вертикальное положение или обрезание верхнего/нижнего белого пространства) может помочь.

Если это не удается, вы должны изменить свой <input type="submit"/> на элемент <button type="search" title="Tooltip">Label</button> и посмотреть, легче ли стиль button, чем стиль input.

Если проблема все еще остается, вам нужно переключить тактику и обернуть свою кнопку в <div class="btnwrap" />.

.searchform .btnwrap {
  display: inline-block;
  overflow: hidden;
  height: 32px;
  border: 1px solid #888;
  /* plus the border-radius styles */
}
.searchform button {
  /* all the original button styles, except the border */
  height: 50px;
  margin: -9px 0; /* (32-50)/2 = -9 */
}

(BTW, вы можете в качестве альтернативы использовать внутренний текст button в <span/> и делать с ним подобный негативный маркер, хотя я подозреваю, что получить вертикальное центрирование проще с помощью button внутри a div.)

Тем не менее, вам действительно нужно просто использовать хорошую старую обратную замену фонового изображения - она будет как рендерить, так и загружать быстрее.: -)

Удачи!

Ответ 9

Эта проблема возникает только в Firefox 4/Win7 с включенным режимом рендеринга DirectWrite (который включен по умолчанию). Режим рендеринга Firefor4 GDI работает правильно.

Это может быть вызвано атрибутом vertical-align. Но базовый уровень U1F50D в нижней точке. Может быть, вам стоит попытаться переместить точки шрифта чуть выше, установите нижнюю точку y на 0.

Ответ 10

Здесь много мусора... Я думаю, что это самый простой способ сделать это:

.searchform input[type="submit"]
{
    height: 35px;
    line-height: 35px;
    font-size: 2em;
}

Надеюсь, что это поможет = D

Ответ 11

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

Удостоверьтесь, что вы устанавливаете большую нижнюю область, отличную от верхней части. Немного скрутитесь, и вы сможете вертикально выровнять текст в Firefox.
Затем вы увидите, что это подталкивает текст слишком близко к вершине элемента в Webkit. Теперь используйте большую высоту строки, чтобы правильно ее выровнять в Webkit и voila!

Я тестировал это на машине под управлением Windows 7 с Firefox 7, Chrome 16, Safari 5.1 и IE9.