Боремся с двойным отступом в IE6 при использовании float

Ответить
Аватара пользователя
Distructor
Администратор
Сообщения: 1606
Зарегистрирован: 28.12.2009
Итак проблема
  • Пример http://rotorweb.ru/wp-content/uploads/2 ... t_bug.html (внешка)

    При использованиии двух вложенных элементов блочного уровня, к которым применены CSS-свойства float и margin, IE6 увеличивает значение отступов (только горизонтальных) в два раза. Т.е. если применить к такому блоку например margin-left: 50px;, то в шестом эксплорере мы получим отступ ровно в 100px, а не в 50px как во всех нормальных браузерах.
Как победить
  • Можно конечно использовать совет под номером 3 от Никиты Селецкого (http://seleckis.lv/journal/css/5-sovetov-verstalschiku (внешка)), но я предпочитаю другой способ. Обычно хватает просто добавить к блоку свойство display:inline, которое заставляет IE6 нормально отобразить отступ и успешно игнорируется остальными браузерами. При этом div сохраняет свойства объекта блочного уровня.
Пример

Код: Выделить всё

<!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" xml:lang="en">
	<head>
		<title>Страница-пример к статье "Боремся с двойным отступом в IE6 при использовании float"</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				color: #000;
				background: #fff;
				font: normal small tahoma, verdana, sans-serif;
			}
			#container {
				width: 150px;
				height: 150px;
				border: 1px solid red;
			}
			#floated {
				width: 50px;
				height: 50px;
				float: left;
				margin-top: 50px; /* вертикальный отступ считается нормально */
				margin-left: 50px; /* это свойство неправильно работает в IE6 */
				border: 1px solid green;
			}
			#container2 {
				width: 150px;
				height: 150px;
				border: 1px solid red;
			}
			#floated2 {
				width: 50px;
				height: 50px;
				float: left;
				margin-top: 50px; 
				margin-left: 50px;
				border: 1px solid green;
				display: inline; /* заставляет IE6 считать горизонтальные отступы правильно */
			}
		</style>
	</head>
	<body>
	<h1>Страница-пример к статье "Боремся с двойным отступом в IE6 при использовании float"</h1>
		<h2>Этот блок неправильно отображается в IE6:</h2>
		<div id="container">
			<div id="floated"></div>
		</div>
		<h2>Проблема решена добавлением CSS-свойства display:inline:</h2>
		<div id="container2">
			<div id="floated2"></div>
		</div>
	</body>
</html>
Источник http://rotorweb.ru/xhtmlcss-verstka/bor ... float.html

Ответить