2010-08-02 4 views
3

Когда у меня есть три divs, все из которых имеют float, я хочу, чтобы разделы расширялись или сокращались, основываясь на том, как долго хранятся данные внутри них.Поплавок, оставшийся в div, не работает в IE7, но работает в Firefox и IE8

Например, если 1-й адрес очень длинный, я хочу, чтобы 1-й ящик расширялся и нажал второй. В 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 это выглядит просто отлично.

ответ

6

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

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

Редактировать: Если вы хотите, чтобы все три окна расширялись с содержимым, я предлагаю установить ширину на основе процентов. В общем, вы захотите найти методы для fluid column layouts.

+0

Явная ширина может победить то, что я пытаюсь сделать. Я хочу, чтобы ширина изменялась динамически на основе контента, а не фиксировалась. – hyprsleepy

+0

Посмотрев на это еще немного, я решил, что могу настроить браузеры, чтобы действовать по-разному для IE 7 по сравнению с IE 8 и Firefox или просто иметь дело с тем, что он никогда не будет выглядеть правильно в IE 7 и идти фиксированной шириной. Я решил на последнем. – hyprsleepy

+0

Игнорирование старой версии IE - это решение, которое я всегда буду одобрять =) – Triptych

1

Вы считаете display:inline-block вместо плавающего? Я не думаю, что вы можете делать то, что хотите, с float И поддерживать 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 */ 
2

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

Вместо этого укажите поплавок, в CSS в Див, но удалить ясно и поместить пустой 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

IE - это дьявол, без сомнения, худший браузер, с которым я когда-либо работал. – bart2puck

Смежные вопросы