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

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 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

Вернуться в «Уроки и статьи по верстке»