Подтвердить что ты не робот

Абсолютно позиционированный родительский элемент и float: правые дочерние части

В IE6, IE7 и FF2 ниже .outer div растягивается до правого края документа. Вот полный тестовый пример:

<!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 +):

Expected output - IE8, FF3+, Chrome 2+, Safari 4, Opera 9+

Фактический вывод (IE6, IE7, FF2):

Actual output - IE6, IE7, FF2

Как заставить внешний div не растягиваться? Это происходит только в IE6, IE7 и Firefox 2.

Требования:

  • .outer не может быть установлен width (он должен быть оставлен как "auto")
  • .outer должен оставаться абсолютно позиционированным
  • .floater должен оставаться плавающим вправо

Обновление

Я воспроизвел поведение как пример "реального мира", используя диалог jQuery. Характеристики одинаковы:

  • Существует абсолютно позиционированный div (т.е. диалоговый контейнер, jQuery-UI создает это)
  • div от 1) имеет width="auto"
  • Внутри этого диалогового окна есть элемент, который перемещается вправо.

Смотрите здесь. Опять же, IE6, IE7 и FF2 являются единственными проблемными браузерами.

Это реплицирует условия внутри моего приложения. Я попытался решить эту проблему до того, что вы видите выше этого обновления, но я понимаю, что люди могут использовать реальный пример, где мои требования имеют смысл. Надеюсь, я это сделал.

4b9b3361

ОТВЕТЫ

Ответ 1

Извинения за отрицательный ответ, но я не думаю, что есть способ обойти это. Реализация CSS для этих старых браузеров просто неверна, когда дело доходит до случая, который вы наметили, и я не верю, что есть способ взломать это через другие свойства CSS в рамках ограничений, которые вы нам предоставили. В качестве ограниченного исправления теоретически вы можете установить max-width на внешний div, чтобы ограничить степень, в которой он растягивается... но, к сожалению, max-width не поддерживается во всех "старых" браузерах, упомянутых в любом случае.

Я знаю, что это не то, что вы хотите услышать, но я думаю, вам придется укусить пулю и либо изменить разметку, либо расслабить ваши требования к стилю (например, отказаться от поплавка).

Ответ 2

Вам нужно это, чтобы остановить переполнение края страницы:

body {margin:0;padding:0}

Однако он все равно займет всю ширину страницы, он просто не будет переполняться

Ответ 3

float должен иметь ширину в этом случае, а с другой точки зрения вы должны иметь верх: 0; left: 0; для позиционированного элемента они не должны храниться так. примечание: это логично только для дизайна, если вы не используете код, пожалуйста, спросите:)

Ответ 4

               .outer {overflow: hidden; ясно: право; позиция: абсолютная; граница: 1px сплошной красный; }     .outer.floater {float: right; }                         Lorem ipsum         Это очень просто, вы должны только установить свойства переполнения и очистки для каждого объекта, в котором были размещены дочерние элементы.

Если родительский элемент также плавает, вам нужно только настроить свой объект на float.

<!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 { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
  .outer .floater { float:right; }
  .outer .floater .child { float:right; }
  </style>
</head>
<body>
  <div class="outer">
      <div class="floater">Lorem ipsum 
                <span class="child">HI!</span>
      </div>
  </div>
</body>

Если у вас есть вопросы, просто спросите!

С уважением и GL.;)

Ответ 5

Если вы измените float:right на clear:right, вы получите запрошенный результат в вашем примере, но он не будет работать так, как ожидалось, если у вас действительно есть контент вне div floater.

Ответ 6

Спецификация css2 имеет некоторую информацию о том, как пользовательский агент "должен" вычислять ширину, но реальность не является спецификацией: http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins.

Я определенно рекомендую перейти с строгим DOCTYPE вместо переходного, http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD. p >

Без указания поля для вашего .outer div пользовательский агент будет определять ширину с помощью width: auto, которая выглядит так, как будто она зависит от пользовательского агента.

Почему вы не хотите указывать ширину родительского div?

Если вы можете, укажите ширину для родительского div, даже если он width: 100%. Вы можете также поместить * { margin: 0; padding: 0; } в таблицу стилей, чтобы избежать различий агентов пользователя в этих атрибутах, особенно если вы указали ширину как 100% для .outer.

Это может быть тривиально, но вы должны уметь сокращать оператор .outer.floater только до .floater.

Если вам нужен эффект "сжиматься к месту" вокруг внутреннего флотатора и нужно поддерживать float-right, добавьте direction: rtl; в класс .floater; в противном случае вы сможете использовать float-left;

Ответ 7

Да для абсолютных позиционированных элементов ширина undefined (как верх и слева). В некоторых случаях некоторые браузеры имеют эластичную ширину табличного стиля, а некоторые делают 100% ширину, но до браузера. Лучше быть явным в этом случае.

Таблицы - действительно единственный хороший способ получить эластичную ширину в кросс-браузере. Таблица с одной ячейкой так же хороша, как и DIV, если вы помните cellspacing=0.

<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
    <tr><td>Lorem ipsum</td></tr>
</table>

Ответ 8

Ваш .outer div пуст, поэтому мы получаем разные результаты. Как только вы добавляете в него контент, по крайней мере, в моем тесте он работает точно так же (мой тест был Chrome 3.0 как "работающий по назначению", а IE7 - сломанным).


<div class="outer">
  <div class="floater">Lorem ipsum</div>
Lorem ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit 
</div>

Поскольку вы упомянули, что у. div div есть контент, попробуйте удалить из него float div и он по-прежнему получает очень похожий вывод.

Edit

Чтобы воспроизвести свой код без растягивания (понимайте здесь, что у вас будут разные проблемы, если вы будете работать одинаково, например, поля/отступы/вертикальные растяжки), вы можете ввести относительную "обертку".


<!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>

  body { margin: 0; }
  #outer { position: absolute; border:1px solid red; }
  #wrapper { position: relative; }
  #floater { position: absolute; right:0; border: 1px blue solid;  }

  </style>
</head>
<body>

  <div id="outer">

    <div id="wrapper"> 
        <div id="floater">Lorem ipsumX</div> 
    </div>

    Lorem ipsum dolor sit amet consequetur elitipsum dolor sit amet consequetur elit
  </div>
</body>

Ответ 9

Так как я вижу в вашем рабочем примере, что вы используете jquery, вы можете сначала рассчитать ширину контейнера, прежде чем плавать float следующим образом:

<!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>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  <style>
  .outer { position:absolute; border:1px solid red;}
  </style>
</head>
<body>
  <div class="outer">
    <div class="floater">Lorem ipsum</div>
  </div>

  <script type="text/javascript">
    $(".outer")
      .css("width", $(".outer").width());
    $(".floater")
      .css("float", "right");
  </script>

</body>

Помещение ширины на внешний div приводит к тому, что он ведет себя во всех других браузерах

Ответ 10

У меня нет IE6, IE7 или FF2 для тестирования, поэтому я собираюсь сделать удар в темноте на этом. Если моя память служит мне, вы захотите float:left на .outer. Это уменьшит ширину .outer, сохранив ваши внутренние пропорции div.