CSS - точно такая же высота и выравнивание кнопки и текстового поля ввода

Question

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

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

Кто-нибудьесть какие-либо советы о том, как этого добиться.

Просто как быстрый пример того, чего я пытаюсь достичь: новая главная страница Google.После начала ввода автозаполнение запускается, и окно поиска перемещается вверх с помощью синей кнопки, идеально выровненной по текстовому полю.Он отлично работает в разных браузерах, но размечен в таблице.Значит ли это, что это может быть лучшим способом достижения этого?

Answer 1

Когда вы пытаетесь достичь идеального размера в пикселях кросс-браузерным способом, самое первое, что вы должны сделать, это рассмотреть возможность сброса CSS.Я предпочитаю HTML5 Boilerplate , но есть и другие, которые вы можете найти в Google.

Сброс CSS действительно важен для нормализации различий между браузерами (особенно при работе с формами).

Answer 2

Используйте фоновый div с изображением для ввода. Это гораздо проще поддерживать Кроме того, абсолютное позиционирование хорошо для такого типа ситуаций.

edit: я написал этот ответ 5 лет назад, теперь есть лучшие способы.