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

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

28 голосов
/ 12 мая 2009

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

Родитель div должен (если я правильно понимаю спецификацию) быть настолько широким, насколько необходимо, чтобы содержать дочерние элементы div, и именно так он ведет себя в 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?

Ответы [ 8 ]

12 голосов
/ 04 мая 2010

Вот решение, которое заставляет 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>
7 голосов
/ 15 мая 2009

Я придумал решение, используя 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>

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

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

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

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

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

2 голосов
/ 02 апреля 2012

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

2 голосов
/ 12 мая 2009

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

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
0 голосов
/ 04 мая 2010

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

Я выбрал решение kaba - но проблема была в том, что в IE все работает нормально, но все остальные браузеры показывают 4-пиксельное пространство между двумя дочерними элементами div. Пространство остается размером 4 пикселя, даже если содержимое обоих 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>
0 голосов
/ 15 мая 2009

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

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

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

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

0 голосов
/ 13 мая 2009

То, с чего вы могли бы начать, это: 

<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, чтобы применить его только к браузеру

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

0 голосов
/ 12 мая 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...