VPF::IE беда позиционирования relative дива в absolute

vdm

Дата 29.7.2009, 10:32 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 236
Регистрация: 16.10.2007

Репутация: нет
Всего: нет

С IE6 беда с позиционированием relative дива в диве типа absolute, со значениями width:auto, когда там есть текст. В примере: если просто написать слово "privet" синий див станет в самый правый край. А если написать слово "privetO", синий див будет с 1px отступом от правого края - что быть не должно. Получается зависим от количества символов. Решаема ли это проблема или этот глюк в IE6 неисправим?

Код


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            div.buttonClassBody
            {
                left:0px !important;
                top:0px !important;
                position:absolute !important;
                height:20px !important;
                width:auto !important;
                background-color:#FF0000 !important;
                margin: 0px !important;
                padding: 0px !important;
                overflow: visible !important;
                display:inline-block !important;
                border-collapse: collapse !important;
            }

            div.buttonClassRight
            {
                top:0px !important;
                right:0px !important;
                position:absolute !important;
                height:20px !important;
                width:6px !important;
                background-color:#0000FF !important;
                margin: 0px !important;
                padding: 0px !important;
                overflow: visible !important;
            }
        </style>

        <title></title>
    </head>
    <body>
        <div class="buttonClassBody">
            <div class="buttonClassRight"></div>
                privetO
        </div>
    </body>
</html>

Это сообщение отредактировал(а) vdm - 29.7.2009, 10:36

Violator

Дата 29.7.2009, 18:37 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

vdm,
в IE6 существует баг позиционирования, когда высота или ширина внешнего блока нечетная

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <style>
    * { margin: 0; padding: 0; }
    .container { background: red; position: relative; margin: 10px; }
    .b100 { width: 100px; height: 100px; }
    .b101 { width: 101px; height: 101px; }
    .corner { width: 10px; height: 10px; background: gray; position: absolute; font-size: 0; }
    .tl { top: 0; left: 0; }
    .tr { top: 0; right: 0; }
    .bl { bottom: 0; left: 0; }
    .br { bottom: 0; right: 0; }
  </style>
</head>
<body>
  <div class="container b100">
    <div class="corner tl"></div>
    <div class="corner tr"></div>
    <div class="corner bl"></div>
    <div class="corner br"></div>
  </div>
  <div class="container b101">
    <div class="corner tl"></div>
    <div class="corner tr"></div>
    <div class="corner bl"></div>
    <div class="corner br"></div>
  </div>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »