Блог

Главная - Вопросы по программированию - Float выглядит по-разному в IE 7 и IE 8 (проверенный html)

Float выглядит по-разному в IE 7 и IE 8 (проверенный html)

#html #css #internet-explorer #google-chrome #css-float

#HTML #css #internet-explorer #google-chrome #css-float

Вопрос:

Здравствуйте, я пытаюсь понять различия в рендеринге этой страницы в Chrome (целевой) и IE 7/8:

 http://phor.net/PRIV/md2/ (it validates)

В IE 7 верхняя панель навигации не выводит LIS, а в IE 8 вверху есть отвратительное поле.

Эта страница очень простая, весь стиль в 

 http://phor.net/PRIV/md2/style.css

Есть идеи, как исправить эту навигационную панель? Спасибо за вашу помощь и обсуждение.

Комментарии:

1. У вас всегда будут проблемы с IE и попытками заставить его работать как другие, гораздо более современные браузеры, независимо от того, какая это версия IE.

Ответ №1:

IE7 не полностью поддерживает свойство встроенного блока, которое вы используете на панели навигации.

http://www.quirksmode.org/css/display.html

Попробуйте вместо этого использовать значения с плавающей точкой.

 #navbar ul li { float: left; }

Убедитесь, что после этого вы очистили свои значения с плавающей точкой.

Ответ №2:

IE7 не поддерживает inline-table , вы могли бы использовать float: left; или display: inline; .

Извините, не вижу большого запаса в IE8.

Ответ №3:

используйте float:left свойство вместо display:inline-table

Измените это 

 #navbar li {
font: 14px Arial;
margin: 0;
margin-right: -2em;
list-style-type: none;
display: inline-table;
}

Для

 #navbar li {
font: 14px Arial;
margin: 0;
list-style-type: none;
float:left;
Padding:0px 10px 0px 10px;}

Ответ №4:

попробуйте 

 #navbar li { display:block; float:left; width:160px;}
#navbar ul { overflow:hidden;}

и удалите все display:inline-table

Я привожу пример для вас

Пример