Разная длина <input> в браузерах

Spidey · November 25, 2009

<input type="text" name="first name" />

Без добавления своих размеров такое вот обычное поле имеет разницу в длине!

Mozila FireFox 2.0.0.20, Internet Explorer 6 - имеют одинаковый размер

Opera 10.10 - меньше на 6px

Вчем же проблем? Наперед всем спс за ответ

psywalker · November 25, 2009

Spidey said:
<input type="text" name="first name" />
Без добавления своих размеров такое вот обычное поле имеет разницу в длине!
Mozila FireFox 2.0.0.20, Internet Explorer 6 - имеют одинаковый размер
Opera 10.10 - меньше на 6px
Вчем же проблем? Наперед всем спс за ответ

Всё правильно, у всех браузеров разные дефолтовые значения на импуты

Spidey · November 25, 2009

psywalker said:
Всё правильно, у всех браузеров разные дефолтовые значения на импуты

ну так по идее тогда, если им прописать неопределенные размеры то этот дефект должен исчезнуть так как размеры для всех одинаковы! Но разница в размах всеравно остается!

s0rr0w · November 25, 2009

Spidey said:
ну так по идее тогда, если им прописать неопределенные размеры то этот дефект должен исчезнуть так как размеры для всех одинаковы! Но разница в размах всеравно остается!

И чо? Кто-то по этому поводу возбуждается?

psywalker · November 25, 2009

Spidey said:
ну так по идее тогда, если им прописать неопределенные размеры то этот дефект должен исчезнуть так как размеры для всех одинаковы! Но разница в размах всеравно остается!

Возьми контейнер, запихни в него свои импуты, назначь им ширину на 6пк больше, и родителю оверфлоу поставь, чтобы всё это дело обрезало.

mishka · November 25, 2009

у инпутов еще и паддинги есть, и тоже разные в разных браузерах

и бордеры

Spidey · November 25, 2009

s0rr0w said:
И чо? Кто-то по этому поводу возбуждается?

гг)) Та у меня разница в 6 пикселей выходит, но за такое меня ипут на работе

mishka · November 25, 2009

Quote
И чо? Кто-то по этому поводу возбуждается?

Да для тестера это круче виагры

Для инпута пиши ширину, паддинги, маргины.

Если по дизайну ненадо маргина то просто обнули, так как есть не во всех браузерах, но есть. Ну а бордер если по дизайну нестандартный то меняй, если стандартный то оставляй дефолтный.

Spidey · November 25, 2009

psywalker said:
Возьми контейнер, запихни в него свои импуты, назначь им ширину на 6пк больше, и родителю оверфлоу поставь, чтобы всё это дело обрезало.

Ловко придумано))

Ну я так и поступлю и буду надеяться, что проверяющие не заметят, что бордер обрезан! Потому что там такие ювелиры сидят, полный ппц

mishka · November 25, 2009

Quote
Возьми контейнер, запихни в него свои импуты, назначь им ширину на 6пк больше, и родителю оверфлоу поставь, чтобы всё это дело обрезало.

Никогда так не делай!

psywalker, тебя как подменили, впервые вижу от тебя вредные советы.

Spidey · November 25, 2009

mishka2, psywalker спс за помощь!

psywalker · November 25, 2009

mishka2 said:
Никогда так не делай!
psywalker, тебя как подменили, впервые вижу от тебя вредные советы.

почему не делать, что в этом плохого? Бордеры можно на родителя насодить, и паддинги я бы привёл в чувство у импута, в чём проблема?

ТС - медведь не прав, я плохого не посоветую, и вот тебе 100% решение твоей проблемы, если уж на то пошло

<!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>

Edited November 25, 2009 by psywalker

mishka · November 25, 2009

psywalker, извини за грубость. Но ты что сума сошел так делать???

То что советую сделать я - валидно, кроссбраузерно, меньше кода, правильно.

А ты советуешь бред в конкретном случае.

Угу... понял я твои маневры. Но мало где нужны резиновые инпуты.

Edited November 25, 2009 by mishka2

psywalker · November 25, 2009

mishka2 said:
psywalker, извини за грубость. Но ты что сума сошел так делать???
То что советую сделать я - валидно, кроссбраузерно, меньше кода, правильно.
А ты советуешь бред в конкретном случае.
Угу... понял я твои маневры. Но мало где нужны резиновые инпуты.

1)А в чём проблема - ограничить ширину?

2) И своё Решение в студию кросс

Edited November 25, 2009 by psywalker

s0rr0w · November 25, 2009

Spidey said:
гг)) Та у меня разница в 6 пикселей выходит, но за такое меня ипут на работе

Пора менять работу. Твои начальники - дебилы. Можешь им передать привет от меня.

mishka · November 25, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>input</title>
	<style type="text/css">
	input{
		width:150px;
		padding:2px 4px;
		margin:0;
		font:12px/14px Arial,Tahoma,sans-serif;
	}
	.border{
		border:1px solid #000;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<input type="text" /><br /><br />
	<input class="border" type="text" />
</div>
</body>
</html>

Да вот самое обычное оформление текстового инпута

Edited November 25, 2009 by mishka2

psywalker · November 25, 2009

mishka2 said:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>input</title>
	<style type="text/css">
	input{
		width:150px;
		padding:2px 4px;
		margin:0;
		font:12px/14px Arial,Tahoma,sans-serif;
	}
	.border{
		border:1px solid #000;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<input type="text" /><br /><br />
	<input class="border" type="text" />
</div>
</body>
</html>

Да вот самое обычное оформление инпута

ИЕ6-7 говно

s0rr0w · November 25, 2009

mishka2 said:
Да вот самое обычное оформление инпута

Вот это самое правильное.

psywalker · November 25, 2009

s0rr0w said:
<input type="text" size="20">
Вот это самое правильное.

ИЕ6-7 также

mishka · November 25, 2009

Quote
ИЕ6-7 говно

??? обьясни

Quote
<input type="text" size="20">

неспорю. Делал бы для себя то так и сделал бы. Но делаю не себе, поэтому надо приблизить к дизайну.

psywalker · November 25, 2009

mishka2 said:
??? обьясни
неспорю. Делал бы для себя то так и сделал бы. Но делаю не себе, поэтому надо приблизить к дизайну.

1) ширина у импутов разная, нужно два одинаковых, как в моём решении

Edited November 25, 2009 by psywalker

mishka · November 25, 2009

Quote
ИЕ6-7 говно

Абсолютно не отличается от мозиллы

Ты код изучи!

первый это дефолтные бордеры. Кросбраузерный!

второй это бордер поменял, он на 2 пикса естественно уже(так как дефолтные 2пикселя шириной) но тоже абсолютно одинаковой ширины во всех браузерах!

s0rr0w · November 25, 2009

mishka2 said:
неспорю. Делал бы для себя то так и сделал бы. Но делаю не себе, поэтому надо приблизить к дизайну.

Да нафиг ложить на дизайн!

Дизайнеры еще те выдумщики, но когда они берутся за извращения с формами, то их стоит посылать куда подальше.

mishka · November 25, 2009

Quote
Ты код изучи!
первый это дефолтные бордеры. Кросбраузерный!

Погарячился немного. Ширина может гулять на 1-2 пикселя. Но зато дефолтные.

А вот второй 100% кросс.

psywalker · November 25, 2009

mishka2 said:
Погарячился немного. Ширина может гулять на 1-2 пикселя. Но зато дефолтные.
А вот второй 100% кросс.

Ну да Мих, вроде точняк, молодец

А дизайнеры иногда такое правда нарисуют, что хрен сверстаешь или столько материала уйдёт ненужного, что ппц

Стёр

Edited November 26, 2009 by psywalker

Sign In

Разная длина <input> в браузерах

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information