Internet Explorer 7 css / html ошибка с плавающей точкой

Проблема заключается в том, что нижний колонтитул на веб-странице, кажется, не следует правильному потоку, как это происходит в FireFox. Похоже, проблема связана с ошибкой Internet Explorer, потому что макет «волшебным образом» встанет на место, когда я наведу указатель мыши на ссылку «Legg til i handlelisten». На страницах, где часть «описание» длиннее левого столбца, нижний колонтитул отображается правильно. Насколько я могу судить, ошибка активна только в IE8, когда он работает в «режиме совместимости с IE8» или «режиме IE7». Я не могу воссоздать ошибку при запуске IE6.

Мне было интересно, сможет ли кто-нибудь найти решение этой ошибки, возможно, какое-то свойство CSS, которое я могу установить, или тег, который нужно изменить.

Эти два изображения показывают ошибку и то, как она должна выглядеть:

http://tinyurl.com/layout-error

http://tinyurl.com/layout-fixed

Указанная страница находится здесь: http://tinyurl.com/yb9h34d

Изменить: Очистить: оба; похоже, ничего не делает для решения проблемы.


html css internet-explorer-8 css-float internet-explorer-7
person Tommy    schedule 08.01.2010    source источник
comment
Также ... если вы разместите код для нижнего колонтитула и немного над ним, вам будет легче помочь.   -  person Tom    schedule 08.01.2010
comment
Не думаю, что это когда-нибудь решится. Возможно какой-то IE6 / IE7-баг. И поскольку IE8 в значительной степени берет верх, просто примите случайный ответ. Я тоже не могу закрыть или удалить этот вопрос   -  person Tommy    schedule 28.07.2010

Ответы (5)


arrow_upward
0
arrow_downward

Да ... похоже, проблема из-за поплавка.

Попробуйте добавить эту строку в свой HTML непосредственно перед нижним колонтитулом:

<div style="clear: both;"></div>

Я думаю, он ожидает предмета, который очищает поплавки.

person Tom    schedule 08.01.2010
comment
Очистить: оба уже установлены в нижний колонтитул. Даже еще один ‹div› с ясным: оба, кажется, не очень-то. - person Tommy; 08.01.2010

arrow_upward
0
arrow_downward

Попробуйте переместить div.container или удалите его, поскольку он бесполезен и представляет собой легкий случай divitis.

person Residuum    schedule 08.01.2010

arrow_upward
0
arrow_downward

В старых браузерах свойство float в CSS удаляет высоту элемента. Следовательно, элемент, который перемещается влево или вправо и который обычно имеет высоту, скажем, 100 пикселей, теперь будет иметь высоту 0 пикселей, и любое содержимое, расположенное ниже, будет перемещаться вверх, чтобы заполнить это пространство, где должно быть содержимое. Большинство браузеров уже исправили эту ошибку, но она все еще появляется даже в современных браузерах. Есть очень простое исправление, которое вы можете добавить в контейнер нижнего колонтитула в CSS:

clear: both;

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

Подробнее о свойстве clear: http://www.w3schools.com/Css/pr_class_clear.asp

person animuson    schedule 08.01.2010

arrow_upward
0
arrow_downward

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

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

person Guffa    schedule 08.01.2010

arrow_upward
0
arrow_downward

Почему в нижнем колонтитуле DIV # есть display: none?

В любом случае, если вы float: left на .footerWithRightAndLeft, все будет в порядке.

Вы можете проверить вещи в IE, нажав F12, если вы не знали. Это не так хорошо, как firebug, но это что-то.

person George Sisco    schedule 12.01.2010