Internet Explorer 6 и 7: плавающие элементы расширяются до 100% ширины, когда они содержат дочерний элемент, плавающий вправо. Есть ли обходной путь?

У меня родительский div плавающий слева, с двумя дочерними div, которые мне нужно плавать вправо.

Родительский div должен (если я правильно понимаю спецификацию) быть настолько широким, насколько это необходимо, чтобы содержать дочерний элемент div s, и так он ведет себя в Firefox и др.

В IE родительский div расширяется до 100% ширины. Кажется, что это проблема с плавающими элементами, у которых есть дети. Страница тестирования:

<!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" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0;float:left;">
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>

</html>

К сожалению, я не могу исправить ширину дочернего div s, поэтому я не могу установить фиксированную ширину в родительском.

Есть ли способ обхода CSS только для того, чтобы сделать родительский div таким же широким, как дочерний div s?

Ответы

Ответ 1

Здесь решение, которое делает inline-block работать на IE6, как на http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/, чтобы сделать элементы более похожими на правополяризованный <div>s:

<!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" lang="en" xml:lang="en">
<head>

<title>Float with inline-block test</title>

<style type="text/css">
    .container {
        border-top: solid 10px green;
        float: left;
    }

    .tester1,
    .tester2 {
        float: right;
    }

    .tester1 {
        border-top: solid 10px blue;
    }

    .tester2 {
        border-top: solid 10px purple;
    }
</style>

<!--[if lte IE 7]>
<style type="text/css">
    .container {
        text-align: right;
    }

    .tester1,
    .tester2 {
        float: none;
        zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
    }
</style>
<![endif]-->

</head>

<body>
<div class="container">
    <div class="tester1">Tester 1</div>
    <div class="tester2">Tester 2</div>
</div>
</body>
</html>

Ответ 2

Я придумал решение, используя text-align: right и display: inline.

Попробуйте следующее:

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="margin-top: 10px; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
        <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
    </div>
</div>

Обратите внимание, что мне пришлось переключить порядок полей "тестер" в разметке, чтобы они отображались так же, как и ваш пример. Я думаю, что есть альтернатива, что margin-top в новом контейнере, но сейчас у меня нет времени на поиск.

Если вам нужен более чистый стиль для всех других браузеров, попробуйте следующее:

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="float: right;">
        <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
        <div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
    </div>
</div>

Есть несколько различных проблем, которые могут возникнуть, когда вы хотите разместить макет вокруг этих ящиков. Тем не менее, я думаю, что эти проблемы будут намного легче решить, чем эта.

Надеюсь, это было полезно для вас.

Ответ 3

Я не мог придумать решение только для CSS, которое соответствует вашим требованиям, но если вы хотите использовать JavaScript-решение, может быть, может помочь следующий код? Я не изменил стиль divs, я только добавил идентификаторы main, sub1 и sub2 к вашим divs.

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;

Ответ 4

У меня была та же проблема и решена путем позиционирования дочернего элемента (который я хотел поместить справа) с положением: абсолютным и правильным: 0. Я дал родительскому элементу достаточно правильного дополнения, чтобы освободить место для дочернего элемента... Стоит сделать снимок, возможно, не работает для всех приложений!

Ответ 5

Как насчет использования таблицы с одной ячейкой вместо внешнего div? Может потребоваться еще одна работа, чтобы все было правильно выровнено, но таблица не расширяется.

Ответ 6

Что-то, с чего вы можете начать, это следующее:

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

Результат этого, по-видимому, по крайней мере находится в непосредственной близости от того, что вы ищете. Очевидно, что вы хотите настроить его для своих нужд и, возможно, добавить некоторую css-логику, чтобы применить ее только к браузеру < IE 7.

Если это не совсем то, что вы ищете, попробуйте сыграть с некоторыми отрицательными полями.

Ответ 7

Во-первых, почему вы не используете встроенные стили?

Я бы использовал это для целевого IE с отдельным файлом css:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

Я знаю, что это не прямой вопрос, но IE ВСЕГДА болит! Большинство разработчиков/разработчиков, которые, как я знаю, сделают совершенно новую таблицу стилей для IE.

Ответ 8

Очень хакерское, но только CSS-решение, которое хорошо работает в IE, хром и FF.

Я принял решение kaba - но проблема была в том, что он работает нормально в IE, но все остальные браузеры показывают 4px-пространство между двумя дочерними div. Пространство остается равным 4px, даже если содержимое на обоих div расширяется. Поэтому, чтобы исправить это, я использовал условные утверждения IE. Я не похож на лучший код в мире, но он выполняет свою работу.

<!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" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0; float: left;">

    <div style="border-top:solid 10px #00c; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>

        <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">

        <!--[if gte IE 5]>
        <div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
        <![endif]-->

         Tester1

        <!--[if gte IE 5]>
        </div>
        <![endif]-->


        </div>

    </div>
</div>
</body>
</html>