Неправильная ширина элемента input

[Стас Агарков]

Я попытался сделать элемент <input type="text"> в док-тайпе HTML 4.01 Strict.

Я указал ему ширину: <input type='text' style='width: 200px;'>

Но в результате получил input с длиной 204 пиксела во всех браузерах (Opera 9.64, IE8, Chrome 3.0, FF 3.6).

Когда я убрал док-тайп, то ширина стала 200 пикселов.

Я попробовал применить XHTML Strict и XHTML Transitional, то всё равно получал длину элемента в 204 пиксела.

Помогите, пожалуйста, разъяснить ситуацию.

[psywalker]

Я попытался сделать элемент <input type="text"> в док-тайпе HTML 4.01 Strict.

Я указал ему ширину: <input type='text' style='width: 200px;'>

Но в результате получил input с длиной 204 пиксела во всех браузерах (Opera 9.64, IE8, Chrome 3.0, FF 3.6).

Когда я убрал док-тайп, то ширина стала 200 пикселов.

Я попробовал применить XHTML Strict и XHTML Transitional, то всё равно получал длину элемента в 204 пиксела.

Помогите, пожалуйста, разъяснить ситуацию.

Доктайп ставь обязательно и ширину тогда 196пк

[Стас Агарков]

Доктайп ставь обязательно и ширину тогда 196пк

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

[psywalker]

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

а дай глянуть, ссылочку

[s0rr0w]

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

Устанавливаем FireBug, запускаем, смотрим на элемент формы.

Так как ширина устанавливается контенту (надеюсь, вы изучали боксовую модель HTML), а не всему элементу, ширина инпута равняется 200px + 2*2px паддинги + 1*2px бордюры

Итого 206px

Все верно.

[psywalker]

Устанавливаем FireBug, запускаем, смотрим на элемент формы.

Так как ширина устанавливается контенту (надеюсь, вы изучали боксовую модель HTML), а не всему элементу, ширина инпута равняется 200px + 2*2px паддинги + 1*2px бордюры

Итого 206px

Все верно.

кстати так я и предполагал, но хотелось убедится

[Стас Агарков]

Да, спасибо, вы правы.

Но мне понятно, почему на элемент select не действуют эти правила? Ему пишу ширину 200 пикселов и он помещается в 200 пикселов своими внешними границами.

[Игорь Ермаков]

Обнулите все возможные стили, которые могут создать дополнительную ширину.

[Стас Агарков]

А почему этих дополнительных стилей нет у select?

Другими словами, у select они по умолчанию равны 0...

[psywalker]

Значит на селекты паддинги и бордеры не распространяются

[s0rr0w]

Да, спасибо, вы правы.

Но мне понятно, почему на элемент select не действуют эти правила? Ему пишу ширину 200 пикселов и он помещается в 200 пикселов своими внешними границами.

Потому что неизвестно, как система нарисует этот самый селектбокс и к чему именно применять ширину.

[psywalker]

вот посмотри, какую штуку заделал кроссбраузерную, может пригодится

http://psywalker.ru/Forum/Forms/

или вот например: http://psywalker.ru/Forum/Forms/index2.html

Edited November 7, 2009 by psywalker

[Стас Агарков]

Посмотрел, спасибо.

Но у вас 100% размеры. Я попробовал в вашем примере написать длину в пикселах и проявилась та же самая ошибка. Так что у вас условия задачи изменены

[psywalker]

Посмотрел, спасибо.

Но у вас 100% размеры. Я попробовал в вашем примере написать длину в пикселах и проявилась та же самая ошибка. Так что у вас условия задачи изменены

ну эт я так, баловался на досуге, думал, мало ли пригодится, вот ещё кстати тут фикс: http://psywalker.ru/Forum/Forms/index4.html

[Стас Агарков]

Какой же это фикс?

input ,div , textarea, select{ width: 100%; overflow: hidden;}

[psywalker]

это я к тому, что если бы я не поставил 100% ширину и оверфлоу, подругому бы они не стали одинаковой ширины, потому что у всех разные дефолтовые значения

[rash]

Дык давно известен способ:

-*-box-sizing: border-box;

Ну и отдельно для IE ниже 8-го указать с учетом бордера и паддинга.

[psywalker]

rash

А чё это такое?

[rash]

Это свойство из CSS3, которое заставляет браузер рассчитывать размеры блоков как в старом добром IE 5, то есть не по контенту, а с учетом паддингов и бордеров. Работает сейчас уже везде (с вендорными префиксами), кроме IE до 8-й версии. Для них можно указать размер отдельно, зная, что эти браузеры работают только на платформе виндовс и зная дефолтные параметры инпутов. Кажется, для input text нужно указывать ширину, меньше на 6 пикселей или «ужимать» обертку на 6 пикселей, если нужно указывать в процентах.

[psywalker]

ухты, тоесть прям любым боксам, вообще любым Див, и чему угодно?

[Стас Агарков]

Спасибо за объяснение.

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

[rash]

ухты, тоесть прям любым боксам, вообще любым Див, и чему угодно?

Да, применяется к любым блочным элементам.

Ну и широкое применение всё-таки ограничено тем, что при строгом режиме браузера это не работает в IE 6–7.

Спасибо за объяснение.

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

Это прекрасно :-) потому что режим десятилетнего браузера в некоторых случаях намного удобнее.

А вы можете использовать 194 пикселя, если у вас фиксированная ширина и вас не интересуют пользователи других платформ кроме виндовс, потому что какие у них умолчания для элементов форм лично я не имею представления, могут и отличаться.

[psywalker]

rash

а можно маленький примерчик плиз

[rash]

Вот где-то как-то так:

<!DOCTYPE HTML>

	<title>Input width</title>
	<style>
		body {
			background: #fff;
			}
		input {
		   -webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		   -ms-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
			}
		.width-wrapper {
			width: 50%;
			}
	</style>

	<!--[if lt IE 8]>
	<style>
		.input-wrapper {
			padding-right: 6px;
			}
	</style>
	<![endif]-->

<div class="width-wrapper">
	<div class="input-wrapper">
		<input>
	</div>
</div>

<div style="width: 50%; height: 1.2em; background: #f99;"></div>

[psywalker]

Спасибо друг, полезная вещь!

[Стас Агарков]

Вы считаете, что это красивый код? Я считаю, что это грязные хаки.