определяя нашу цель
Существует множество статей о том, как элементы ввода различаются в разных браузерах и операционных системах, даже в темах ОС. Заключение этих статей всегда одинаково. Не связывайтесь с ними. И обычно я согласен. В обычной форме существуют ограничения на стилизацию элементов формы, хотя бы для того, чтобы защитить наше здравомыслие. Небольшие различия в размере, интервале и внешнем виде между элементами ввода — это то, что присуще сети. В других случаях, однако, я могу понять разочарование дизайнера.
Одним из таких случаев является небольшая форма поиска, часто встречающаяся в заголовке сайта. Выдающийся элемент сайта обычно состоит из текстового ввода и кнопки отправки. Дизайн обычно тесно интегрирован во весь заголовок, поэтому любые различия в пикселях могут привести к очень быстрому небрежному ощущению. Одно длительное разочарование заключается в том, что высота как ввода текста, так и отправки трудно согласовать между кросс-платформенными и кросс-браузерными. Но есть способы. Мы говорим о CSS в конце концов.
Цель здесь будет состоять в том, чтобы создать согласованную настройку для ввода текста и кнопки отправки, чтобы им можно было легко присвоить фиксированную и равную высоту, отображая один и тот же кросс-браузер. Это станет хакерским, и вам нужно будет испачкать руки, но в конце концов, это может стоить проблем, особенно если использовать их экономно.
определение проблемы
input[type="text"], input[type="submit"] {height:2em;}
Короче говоря, приведенный выше код иллюстрирует то, что я надеюсь сделать. Добавьте одинаковую высоту к кнопке ввода текста и отправки и надеемся, что они отображаются с одинаковой высотой во всех браузерах. Конечно, все будет не так просто. Впрочем, первую проблему легко решить. Оба элемента имеют различный базовый размер шрифта в некоторых браузерах, поэтому добавление размера шрифта: 100% к обоим элементам помогает нам немного продвинуться вперед.
Самая большая проблема связана с границами. Ширина границы на кнопке отправки входит в высоту, ширина границы при вводе текста не влияет на высоту элемента. Другими словами, граница для ввода текста рисуется снаружи, а граница для кнопки отправки — внутри. Некоторые быстрые эксперименты со свойством css -vendor-box-sizing не привели к большому количеству (если вам не нужно беспокоиться о ie6 и ie7), поэтому давайте попробуем трудный путь.
input[type="text"], input[type="submit"]{height:2em; font-size:100%; border-width:0;}
Единственная разумная вещь, которую нужно сделать, — отключить границы как для ввода текста, так и для кнопки отправки, а также предоставить некоторые общие обертки, чтобы принять стилизацию. Делая это, вы избегаете различий в высоте рендеринга между двумя элементами ввода. Я знаю, что это не очень чисто, но по крайней мере это работает.
HTML-код
<div class="search">
<form id="searchForm" action="#" method="post">
<div class="inputWrap"><input type="text" /></div>
<div class="submitWrap"><input type="submit" /></div>
</form>
</div>
Это последний HTML-код, который мы будем использовать для нашей формы поиска. Не полный мусор, только элементы .inputWrap и .submitWrap устарели со структурной точки зрения. Мы будем использовать эти два элемента для фальсификации границ вокруг элементов ввода, кроме того, нам понадобится плавающая оболочка. Обратите внимание, что добавление display: inline-block (а не с плавающей точкой) также является опцией, но применение поплавков дает нам немного больше контроля над расстоянием между ними, что я предпочитаю.
В Opera, Chrome и Safari все еще будет небольшая разница в высоте между элементами. Это вызвано заполнением текстового ввода, которое можно легко удалить. А добавив высоту строки, равную высоте элемента, мы получим лучшее выравнивание текста кнопки отправки (Chrome) и текста ввода текста (IE). Все это приводит к следующему коду:
.inputWrap, .submitWrap {float:left; border:1px solid #000;} input[type="text"], input[type="submit"]{height:2em; line-height:2em; font-size:100%; border-width:0; padding:0;}
Это даст отличные результаты в Safari, Chrome, Firefox и Opera на Windows и Mac, к сожалению, IE все еще испытывает некоторые проблемы (но что еще нового, верно). Будут появляться странные пробелы, которых там быть не должно, но ничего, что пара плаваний (и отображение: встроенные исправления) не решит. Вот код ie7-css.
/* ie7- specific css */
.search .textfield {float:left; display:inline;}
положить все это вместе
.inputWrap, .submitWrap {float:left; border:1px solid #000;}
input[type="text"], input[type="submit"]{height:2em; line-height:2em;
font-size:100%; border-width:0; padding:0;}
/* ie7- specific css */
.search .textfield {float:left; display:inline;}
Это «все», что вам нужно для того, чтобы форма поиска постоянно отображалась в различных браузерах и операционных системах. Если вам нужен живой пример кода, вы можете проверить тестовую страницу:
Обратите внимание, что аналогичная проблема существует с шириной входных элементов, в этом случае, хотя свойство -vendor-box-sizing (border-box) оказывается намного более полезным. К сожалению, ie6 и ie7, похоже, не очень это любят, когда дело доходит до определения высоты.
Я не рекомендовал бы использовать это для каждой формы и каждого элемента ввода, но когда два входа должны выровнять пиксель идеально, обеспечивая согласованность дизайна, это очень полезная опция. Во всяком случае, это хороший трюк, чтобы выиграть очки с вашими дизайнерами.