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

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

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

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

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 **[ТС]**

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

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

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

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

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

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

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

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

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

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

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

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

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

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