Поплавок слева в div не работает в IE7, но работает в Firefox и IE8 - PullRequest
Новая
       25

Поплавок слева в div не работает в IE7, но работает в Firefox и IE8

3 голосов
/ 02 августа 2010

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

Например, если 1-й адрес очень длинный, я хочу, чтобы 1-й ящик расширился и переместил 2-й.В Firefox это происходит, но в Internet Explorer требуется ширина, чтобы выглядеть правильно.В IE7 он вообще не отображается справа - у каждого div есть таблица с двумя столбцами, а в IE7 он отображает 2-й столбец на дальнем краю страницы вместо аккуратного с 1-м столбцом, несмотря на настройку align = left на2-й столбец и установка небольшой ширины на 1-й столбец.У меня есть тип документа, указанный на главной странице, и я попытался добавить ясно: оба безуспешно.

Почему ширина полностью меняет то, как с плавающей точкой отображается в IE, и как я могу это исправить?Страница должна хорошо выглядеть в IE7. 

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>

Я заметил, что в IE8 это выглядит просто отлично.

Ответы [ 3 ]

6 голосов
/ 02 августа 2010

Вы должны почти всегда включать явную ширину при перемещении элементов.

Если вы этого не сделаете, браузеры должны угадать, что вы имеете в виду.В этом случае Firefox догадывается лучше, чем IE, но не стоит их угадывать.Будьте явными, где можете.

edit: если вы хотите, чтобы все три поля расширялись с содержанием, я бы предложил установить ширину в процентах.В общем, вы захотите поискать методы для макетов колонн жидкости .

2 голосов
/ 06 мая 2011

Только что обнаружил, что если у вас есть поплавок и клир, примененные к DIV дросселям IE7.

Вместо этого укажите float в CSS DIV, но удалите очистку и поместите пустой div после рассматриваемого DIV, например:

ДО: 

<div style="float:left; clear:right;">Content goes here</div>

ПОСЛЕ 

<div style="float:left;">Content goes here</div>
<div style="clear:right;"></div>
1 голос
/ 02 августа 2010

Вы рассматривали display:inline-block вместо плавающего? Я не думаю, что вы можете делать то, что вы хотите с плавающей точкой и поддерживать IE без использования JS для явного определения ширины для каждого плавающего элемента.

Еще одно замечание: у вас есть для объявления второго отдельного правила для элементов уровня блока в IE:

HTML: 

<div class="foo">test</div><div class="foo">bar</div>

CSS: 

.foo { display:inline-block; }
.foo { display:inline; } /* Feed this to IE below 9 only with a CC. Don't feed it to modern browsers */
...