Вопрос по html, css – Я проверил это на компьютере с Windows 7 под управлением Firefox 7, Chrome 16, Safari 5.1 и IE9.

16

ение текста на кнопке отправки запроса намой блог очень низок в 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 с упрощенными символами.

Вы пробовалиvertical-align свойство? oblig
я верюэтот вопрос имеет более элегантное решение проблемы. Только для записи! Ennea
Интересно, что я могу воспроизвести это в FF4 на OSX 10.6, но не на моей машине с Win 7. Возможно, это потому, что у меня естьgdipp Установлено ... Также отличная работа над глифами. Я большой сторонник иконок в качестве веб-шрифтов. peterjmag
не уверен, что это будет работать или нет. Поместите это в div и примените css к этому div. Это сработало много раз для меня. coder
я пробовалvertical-align:middle с соответствующими значениями таблицы дляdisplay и это не сработало. Eli Grey

Ваш Ответ

11   ответов
0

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

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

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

0

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

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

2

ок. Текст был смещен на 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).

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

0

что это самый простой способ сделать это:

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

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

1

что вы должны применить определенные элементы ccs к элементу parent вместо элемента child. Так что в основном попробуйте некоторые из CSS, как вертикальное выравнивание: в .searchform div.

Тем временем у меня проблемы с моим значком поиска на smartemini.com. Работает в браузерах aaaaallllll кроме ie9. :(

Это не помогает, так как текст внутри кнопки отправки, который требует изменения положения, а не сама кнопка отправки. Eli Grey
7

е проверить их все, если вставите это в поле URL:

resource://gre-resources/forms.css

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

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

37

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>

Fire Fox: Хром:

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

Так что ты можешь сделать?

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

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

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

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

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

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

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

Я думаю, что я буду изменять свой шрифт в любом случае, хотя для Firefox. Eli Grey
Кроме того, «например, более быстрая загрузка и время рендеринга» неверны. Этот шрифт с двумя глифами имеет очень легкий размер файла (больше, чем SVG или изображение), который я могу вписать в очень маленькие данные: URI, и вычисления, необходимые для визуализации одного глифа, имеют бесконечно малую стоимость. Eli Grey
«Специальный символ ничего не значит без шрифтов CSS» U + 1F50E не является символом частного использования. Это на самом деле означает «вправо увеличительное стекло», что подразумевает поиск. Изменить: Кроме того, символ не ниже, чем обычные шрифты. Можете ли вы привести пример шрифта, который устанавливает U + 1F50E намного выше? У меня это правильно на соответствующей базовой линии. Eli Grey
+1: изящное замечание деградации - это хорошо. Я бы определенно использовал это решение вместо своего, но хотел найти обходной путь для проблемы Firefox :) theazureshadow
@ Или я не хотел загромождать комментарии здесь, поэтому я включил некоторые существенные изменения, учитывая ваши ответы, в сам ответ. Nicole
1

толкнув прокладку снизу (!)

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

(«Размеры футболки» приводят к различным смещениям фона и ширине в других местах)

2

когда искал решение этой проблемы, но так как я никогда не находил ничего, кроме намека на изменение нижнего отступа, я хотел бы поделиться тем, что нашел, что регулировка нижнего отступа для просто 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;
    }
}
0

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

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

Я отмечаю, что когда я добавляю кinput«svalue - увеличительное стекло падает еще больше в 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 */
}

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

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

Удачи!

С помощьюbutton вместоinput не помогает, кажется, восприимчив к тем же вопросам положения текста. Nicole
Да. Исправление шрифта, кажется, является ключом к этой забавной маленькой проблеме. Конечно, использование фонового изображения является самым быстрым / простым, но у меня есть чувство, что Эли знал об этом и просто хотел попробовать этот подход в качестве эксперимента. Már Örlygsson

Похожие вопросы