В IE6, IE7 и FF2 элемент .outer ниже растягивается к правому краю документа. Вот полный тестовый пример:
<!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">
<head>
<style>
.outer { position:absolute; border:1px solid red; }
.outer .floater { float:right; }
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum</div>
</div>
</body>
Как я понимаю position:absolute, внешний div должен быть удален из потока документа и (без указания ширины) должен занимать минимальное количество места, необходимое для отображения его содержимого. Однако float:right на любом ребенке нарушает это.
Ожидаемый результат (IE8, FF3 +, Chrome 2+, Safari 4, Opera 9 +):
Фактический вывод (IE6, IE7, FF2):
Как сделать так, чтобы внешний div не растягивался? Это происходит только в IE6, IE7 и Firefox 2.
Требования:
.outer не может быть установлен width (его необходимо оставить как "auto") .outer должен оставаться абсолютно позиционированным .floater должен оставаться смещенным вправо
Обновление
Я воспроизвел поведение как пример "реального мира", используя диалог jQuery. Характеристики одинаковы:
- Существует абсолютно позиционированный div (т. Е. Контейнер диалога, jQuery-UI создает его)
- Div от 1) имеет
width="auto"
- В этом диалоге есть элемент, который всплывает вправо.
Смотрите здесь . Опять же, IE6, IE7 и FF2 являются единственными проблемными браузерами.
Это повторяет условия внутри моего приложения. Я пытался свести проблему к тому, что вы видите над этим обновлением, но у меня возникает ощущение, что люди могут использовать реальный пример, где мои требования имеют смысл. Я надеюсь, что сделал это.