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

@Дерек · Регистрация: 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 **[ТС]**

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

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

Новые блоги и статьи Все статьи Все блоги /
Осваиваем Kubernetes: Подробная шпаргалка Mr. Docker 15.03.2025 Kubernetes — это открытая платформа для автоматизации развертывания, масштабирования и управления контейнеризированными приложениями. Он был создан для решения проблем, с которыми сталкиваются. . .	Лучшие PHP REST API фреймворки Jason-Webb 15.03.2025 Современные PHP REST API фреймворки предлагают большой набор функциональности: от автоматической валидации данных и управления маршрутизацией до генерации документации и интеграции с различными. . .	Многопоточность в Java с Project Loom: виртуальные или обычные потоки Javaican 15.03.2025 Многопоточность всегда была одноим из основных элементов в разработке современного программного обеспечения. Она позволяет приложениям обрабатывать несколько задач одновременно, что критично для. . .	Что нового в Swift 6 и особенности миграции mobDevWorks 15.03.2025 Swift 6 — это новый крупный релиз языка программирования от Apple, анонсированный на WWDC 2024. Если вы следили за эволюцией Swift, то наверняка заметили, что многие значимые возможности, которые. . .	Вопросы на собеседовании по Android mobDevWorks 14.03.2025 По данным статистики, Android занимает более 70% мирового рынка мобильных операционных систем, что делает платформу привлекательной как для начинающих разработчиков, так и для опытных профессионалов. . . .
Лучшие игровые движки для Python py-thonny 14.03.2025 Python обеспечивает разработчиков игр мощными движками и фреймворками, которые позволяют воплотить практически любую идею — от простой аркады до визуального романа с разветвленным сюжетом. Главное. . .	Бессерверный JavaScript: Разработка масштабируемых API с AWS Lambda run.dev 14.03.2025 Но что такое бессерверные вычисления на самом деле? По сути, это модель облачных вычислений, где разработчик фокусируется исключительно на создании бизнес-логики, не тратя время на настройку. . .	Безопасность кода в C++26: Менеджеры ресурсов и висячие ссылки NullReferenced 14.03.2025 C++ всегда был языком, предоставляющим разработчикам большие возможности и гибкость, но вместе с тем требующим ответственности. Одной из самых коварных проблем даже для опытных программистов остаются. . .	smart-agent proper interface settings (2025) jigi33 14.03.2025 Smart-agent proper interface settings (mart 2025). (see screenshots to look at "Etalon" ARM)	Продвинутые настройки JVM Javaican 14.03.2025 Стандартные параметры запуска JVM хороши для повседневной разработки, но совершенно недостаточны для высоконагруженных систем. Представьте, что вы запускаете финансовую платформу, обрабатывающую. . .

@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