margin, input, ie

catman · September 15, 2011

Здравствуйте!

Сразу изложу проблему: имеем вот такой элементарный код, проблема в следующем: элемент с id "v" имеет отступ слева в 10px, аналогичный отступ слева получается и у тега input в ie 5,6,7, вобщем создаётся впечатление что input наследует margin своего родителя, но насколько мне известно маргины не наследуются, да и я пробовал задать input, margin 0, не катит. вобщем в чём косяк?

Спасибо за внимание.

#c{width:160px; height:40px; background:#888; border:1px solid #000;}
#v{width:130px; height:20px; margin-top:9px; margin-left:10px; border:1px solid #000;}
#b{width:105px; height:15px; border:1px solid #000; background:#ff0;}

<div id="c">
<div id="v">
<input id="b" type="text" name="pole" maxlength="25"/>
</div>
</div>

Vlad · September 16, 2011

IE9 у меня в режиме IE7 показал без отступов. Проверьте на другом компьютере, возможно глюк отдельного браузера (такое тоже бывает), если повторится, дайте ссылку на страницу целиком, возможно ошибка где-то в другом месте находится.

catman · September 16, 2011

вот весь код этой тестовой странички, я специально продублировал блок, чтобы показать как изменяются отступы при значении margin-left, 5px и 10px:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>x</title>
  <style type="text/css">
	.c{width:160px; height:40px; margin:10px 0; background:#ccc; border:1px solid #000;}
	#v1{width:130px; height:20px; margin-top:9px; margin-left:5px; background:#aaa; border:1px solid #000;}
	#v2{width:130px; height:20px; margin-top:9px; margin-left:10px; background:#aaa; border:1px solid #000;}
	.b{width:105px; border:1px solid #000; background:#ff0;}
  </style>
</head>
<body>

	<div class="c">
		<div id="v1">
			<input class="b" type="text" name="search" maxlength="10"/>
		</div>
	</div>

	<div class="c">
		<div id="v2">
			<input class="b" type="text" name="search" maxlength="10"/>
		</div>
	</div>

</body>
</html>

вот ie, скриншот с виртуальной машины, а изначально тестировал в "ie tester":

вот современная opera:

Justnewone · September 16, 2011

В ие маргины input по дефольту не обнуляются. Костылите через кондишнал комментс.

catman · September 16, 2011

В ие маргины input по дефольту не обнуляются. Костылите через кондишнал комментс.

Не знаю как понять по умолчания не обнуляются, можно ведь принудительно *{margin:0;} или задать margin:0; для самого поля только это не помогает, а по поводу устранения этого явления я делаю так position:relative; top:9px; left:10px;. тут вопрос даже в другом может я гдето ошибся и не замечаю этого или это глюк ie с которым нужно смирится.

Justnewone · September 16, 2011

никак не обнулица, хоть стопицот классов дать и им всем задать 0. Никак не обнуляется. Оберните спаном импут и только для ие напишите маргин лефт и маргин райт отрицательные + ширину инпута "на глазок".

Но в любом случае, задача перерастает уже в "надо ссылоко".

Sign In

margin, input, ie

Question

catman

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

catman

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

catman

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information