- Пример 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>