Равная высота поля и кнопки и кроссбраузерность

@Дерек · Регистрация: 08.02.2013

Author24 — интернет-сервис помощи студентам

Господа, я тут несколько дней мучаюсь и не могу сделать поле и кнопку одинаковой высоты, чтобы текст внутри и само поле с кнопкой были выровнен. Хе-хе, думаете это просто? Это не просто! Ведь нужно чтобы было кроссбраузерно, а именно:

IE 5,5 (важно!)
IE 6 (важно!)
IE 7
IE 8
IE 9

Chrome
Safari
Firefox
Opera

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="/search/" method="get">
 
<input type="text" name="searchword" value="Поиск по сайту" style="

height: 1.9em;
border: 1px solid red;
padding: 0;
margin: 0;
outline: none; 
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
border: 1px solid red;">
 
<input type="submit" value="Искать" style="

height: 1.9em;
padding: 0 9px;
margin: 0;
outline: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid red;">
 
</form>

Вот так должно быть:

@koza4ok · 08.02.2013, 11:01

line-height поставить равным высоте кнопки ,если уберете вертикальные padding для кнопок.

@Дерек · 08.02.2013, 11:28 **[ТС]**

Не катит!

Я уже не знаю что делать

Добавлено через 16 минут
Вся проблемма из-за IE 5.5 и IE 6.
Если я сделаю так, чтобы корректно отображалось во всех браузерах, то в IE 5.5 и IE 6 отображается иначе.

@Taatshi · 08.02.2013, 12:48

Дерек, текста в кнопках лучше выравнивать с помощью

CSS
1
vertical_align: middle

@Дерек · 08.02.2013, 13:51 **[ТС]**

Блин, при чём тут только выравнивание текста!?
Тут вопрос не только в этом. Комплекс тут!
Вот вы сами попробуйте и посмотрите что у вас получится.
Было бы так всё просто, то я не стал обращаться за помощью

Я уже несколько дней мучаюсь и не могу сделать одинаковой высоты поле и кнопку и чтобы они сами были выровнены и текст внутри тоже.
В общем так, как на рисунке я вам показал.
Попробуйте сделать, если интересно.
Может у кого-то и получится.

Я уже что только не пробовал и не получается у меня.
Я уже и кучу фреймворков пересмотрел с образцами разных форм и кнопочек - и у всех них косячные input, у всех что-то да криво.

@xaus · 08.02.2013, 14:37

просмотрел код у себя во всех браузерах все ровно даже в разных версиях только в мазиле чуток кнопка выше на пару пиксилей
может быть сделать один блок и в нем сделать еше 2-а блока один поле для вода текста другой кнопка, так расползаться небудет

@Дерек · 08.02.2013, 15:07 **[ТС]**

В 5.5 смотрел?
Так вся суть в 1 и 2 пикселях. Даже скорее в 1.
То кнопка выше на пиксель.
То высота на 1 пиксель меньше, то ещё чего.
Об этом и речь.
Вы что думаете, что проблема в 3-10 пикселях!?

Только в одном!
Вот я и говорю, как сделать всё одной высоты и выравнено?

Donald28 · 08.02.2013, 15:15

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

HTML5
1
<div id="submit" onclick="form.submit();">Искать</div>

либо используй type="image":

HTML5
1
<input type="image" src="imgbutton.gif" />

@Дерек · 08.02.2013, 15:19 **[ТС]**

Вообще-то интересно именно через просто input.
Через картинку вообще не подходит.
И button тоже не катит.

Donald28 · 08.02.2013, 15:23

Если через submit - то не уверен, что проблема кроссбраузерности разрешима в указанных браузерах (тем более для 5 осла).

Сообщение от Дерек

Через картинку вообще не подходит.

Почему? У submit и image - одинаковая функция: при нажатии отправлять форму.

@Дерек · 08.02.2013, 15:32 **[ТС]**

Осёл не 5, а 5.5.
Картинка не подходит для резиновой, респонсивной, адаптивной вёрстки.

@Taatshi · 08.02.2013, 15:38

Сообщение от Дерек

Блин, при чём тут только выравнивание текста

все остальное - аналогично. комплекс тут)

с паддингами всегда будет проблема не в одном, так в другом браузере.

http://rotorweb.ru/htmlcss-ver... ormax.html

@Дерек · 08.02.2013, 15:49 **[ТС]**

Нету никакого паддинга у меня.
Задаю высоту допустим в пикселях, так получается - кнопка включая бордер = 24 пикселя, а поле 24 пикселя + бордер = 26 пикселей. А в старом Осле всё нормально.

@Taatshi · 08.02.2013, 15:53

Не по теме:

там написано IE 5.5 ???? :swoon:

Vovan-VE · 08.02.2013, 15:58

Дерек, Уберите height. Вместо него font-size и padding + border.
Кстати, у Вас border дублируется.

@Дерек · 08.02.2013, 16:05 **[ТС]**

Это вообще не подходит.
Если убрать height, то в 5.5 поле вообще будет низкое.

@Дерек · 08.02.2013, 16:10 **[ТС]**

Уважаемые господа.
Можно вас попросить реальное решение дать?
Вы тут всякие советы даёте, но вы хоть сами сначала посмотрите что выйдет, если применить ваш совет.

Vovan-VE · 08.02.2013, 16:22

Дерек, Не у всех есть винда. Тем более с такими динозаврами в рабочем состоянии.

Добавлено через 1 минуту
Дерек, См. также условные комментарии MS. http://msdn.microsoft.com/en-u... S.85).aspx

Добавлено через 2 минуты

HTML5
1
2
<!--[if lt IE 6]><link rel="stylesheet" href="ie5.css" type="text/css" /><![endif]-->
<!--[if IE 6]>   <link rel="stylesheet" href="ie6.css" type="text/css" /><![endif]-->

@Дерек · 08.02.2013, 16:29 **[ТС]**

Вы имеете в виду, что нужно использовать дополнительные стили с хаками.
Может это действительно единственное решение.

Кстати, у меня тоже нет старых Виндов отдельно на компе. Но есть тестер с пакетом Виндов.

Новые блоги и статьи Все статьи Все блоги /
Java Micronaut в Docker: контейнеризация с Maven и Jib Javaican 16.03.2025 Когда речь заходит о микросервисной архитектуре на Java, фреймворк Micronaut выделяется среди конкурентов. Он создан с учётом особенностей облачных сред и контейнеров, что делает его идеальным. . .	Управление зависимостями в Java: Сравнение Spring, Guice и Dagger 2 Javaican 16.03.2025 Инъекция зависимостей (Dependency Injection, DI) — один из фундаментальных паттернов проектирования, который радикально меняет подход к созданию гибких и тестируемых Java-приложений. Суть этого. . .	Apache Airflow для оркестрации и автоматизации рабочих процессов Mr. Docker 16.03.2025 Управление сложными рабочими процессами — одна из главных головных болей инженеров данных и DevOps-специалистов. Представьте себе: каждый день нужно запускать десятки скриптов в определенной. . .	Оптимизация приложений Java для ARM Javaican 16.03.2025 ARM-архитектура переживает настоящий бум популярности в технологическом мире. Когда-то воспринимаемая исключительно как решение для мобильных устройств и встраиваемых систем, сегодня она штурмует. . .	Управление состоянием в Vue 3 с Pinia и Composition API Reangularity 16.03.2025 Когда я начал работать с Vue несколько лет назад, мне казалось достаточным использовать простую передачу данных через props и события между компонентами. Однако уже на среднем по сложности проекте. . .
Введение в DevSecOps: основные принципы и инструменты Mr. Docker 16.03.2025 DevSecOps - это подход к разработке программного обеспечения, который объединяет в себе принципы разработки (Dev), безопасности (Sec) и эксплуатации (Ops). Суть подхода заключается в том, чтобы. . .	GitHub Actions vs Jenkins: Сравнение инструментов CI/CD Mr. Docker 16.03.2025 В этой битве за эффективность и скорость выпуска программных продуктов ключевую роль играют специализированные инструменты. Два гиганта в этой области — GitHub Actions и Jenkins — предлагают разные. . .	Реактивное программирование с Kafka Stream и Spring WebFlux Javaican 16.03.2025 Реактивное программирование – это программная парадигма, ориентированная на потоки данных и распространение изменений. Она позволяет выражать статические или динамические потоки данных и. . .	Простая нейросеть на КуМир: Учебное пособие по созданию и обучению нейронных сетей EggHead 16.03.2025 Искусственные нейронные сети — удивительная технология, позволяющая компьютерам имитировать работу человеческого мозга. Если вы хотя бы немного интересуетесь современными технологиями, то наверняка. . .	Исполнитель Кузнечик в КуМир: Решение задач EggHead 16.03.2025 Среди множества исполнителей в системе КуМир особое место занимает Кузнечик — простой, но невероятно полезный виртуальный персонаж, который перемещается по числовой прямой, выполняя ваши команды. На. . .

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	08.02.2013, 11:01	2
	line-height поставить равным высоте кнопки ,если уберете вертикальные padding для кнопок. 1

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 11:28 [ТС]	3
	Не катит! Я уже не знаю что делать Добавлено через 16 минут Вся проблемма из-за IE 5.5 и IE 6. Если я сделаю так, чтобы корректно отображалось во всех браузерах, то в IE 5.5 и IE 6 отображается иначе. 0

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 13:51 [ТС]	5
	Блин, при чём тут только выравнивание текста!? Тут вопрос не только в этом. Комплекс тут! Вот вы сами попробуйте и посмотрите что у вас получится. Было бы так всё просто, то я не стал обращаться за помощью Я уже несколько дней мучаюсь и не могу сделать одинаковой высоты поле и кнопку и чтобы они сами были выровнены и текст внутри тоже. В общем так, как на рисунке я вам показал. Попробуйте сделать, если интересно. Может у кого-то и получится. Я уже что только не пробовал и не получается у меня. Я уже и кучу фреймворков пересмотрел с образцами разных форм и кнопочек - и у всех них косячные input, у всех что-то да криво. 0

@xaus 10 / 10 / 0 Регистрация: 30.01.2013 Сообщений: 93
	08.02.2013, 14:37	6
	просмотрел код у себя во всех браузерах все ровно даже в разных версиях только в мазиле чуток кнопка выше на пару пиксилей может быть сделать один блок и в нем сделать еше 2-а блока один поле для вода текста другой кнопка, так расползаться небудет 1

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 15:07 [ТС]	7
	В 5.5 смотрел? Так вся суть в 1 и 2 пикселях. Даже скорее в 1. То кнопка выше на пиксель. То высота на 1 пиксель меньше, то ещё чего. Об этом и речь. Вы что думаете, что проблема в 3-10 пикселях!? Только в одном! Вот я и говорю, как сделать всё одной высоты и выравнено? 0

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 15:19 [ТС]	9
	Вообще-то интересно именно через просто input. Через картинку вообще не подходит. И button тоже не катит. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	08.02.2013, 15:23	10
	Если через submit - то не уверен, что проблема кроссбраузерности разрешима в указанных браузерах (тем более для 5 осла). Сообщение от Дерек Через картинку вообще не подходит. Почему? У submit и image - одинаковая функция: при нажатии отправлять форму. 1

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 15:32 [ТС]	11
	Осёл не 5, а 5.5. Картинка не подходит для резиновой, респонсивной, адаптивной вёрстки. 0

@Taatshi Почетный модератор 12274 / 5339 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	08.02.2013, 15:38	12
	Сообщение от Дерек Блин, при чём тут только выравнивание текста все остальное - аналогично. комплекс тут) с паддингами всегда будет проблема не в одном, так в другом браузере. http://rotorweb.ru/htmlcss-ver... ormax.html 1

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 15:49 [ТС]	13
	Нету никакого паддинга у меня. Задаю высоту допустим в пикселях, так получается - кнопка включая бордер = 24 пикселя, а поле 24 пикселя + бордер = 26 пикселей. А в старом Осле всё нормально. Миниатюры 0

@Taatshi
	08.02.2013, 15:53	14
	Не по теме: там написано IE 5.5 ???? :swoon: 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	08.02.2013, 15:58	15
	Дерек, Уберите height. Вместо него font-size и padding + border. Кстати, у Вас border дублируется. 1

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 16:05 [ТС]	16
	Это вообще не подходит. Если убрать height, то в 5.5 поле вообще будет низкое. Миниатюры 0

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 16:10 [ТС]	17
	Уважаемые господа. Можно вас попросить реальное решение дать? Вы тут всякие советы даёте, но вы хоть сами сначала посмотрите что выйдет, если применить ваш совет. 0

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	08.02.2013, 16:29 [ТС]	19
	Вы имеете в виду, что нужно использовать дополнительные стили с хаками. Может это действительно единственное решение. Кстати, у меня тоже нет старых Виндов отдельно на компе. Но есть тестер с пакетом Виндов. 0