Совместимость заголовка сайта в IE6 с использованием поплавков и абсолютного позиционирования

Question

После разработки и написания стандартного веб-сайта, который работает функционально в обычных браузерах (Firefox, Chrome и т. Д.), Теперь мне нужно сделать так, чтобы он выглядел одинаково (или в основном так) в Internet Explorer, вплоть до Internet Explorer 6.

Текущую версию веб-сайта можно найти по адресу http://www.adwas.org/test/redesign/, с минимальной версией проблемы по адресу http://jsfiddle.net/FdS6L/

Проблема, с которой я столкнулся, заключается в том, что на уровне и нижеобласть с логотипом в IE6 абсолютно не работает (и, я думаю, до сих пор 7).Я уже пытался исправить некоторые из проблем, используя селектор звездного взлома, хотя он все еще выглядит сильно испорченным.Мой вопрос: как мне сохранить размер заголовка и сделать элементы видимыми (несколько, если не полностью), как это выглядит в большинстве браузеров?

Примечание:

Я не против добавления JavaScript для того, чтобы макет работал по мере необходимости в IE6.(в основном относится к подменю навигации)

Answer 1

Я пытался поработать над вашим сайтом, и дошел до этого: http://jsfiddle.net/3m367/3/. Я в основном очистил некоторый код и реструктурировал заголовок, где столбцы имеют полную ширину автоматически, а не принудительно (overflow-x это свойство CSS3, поэтому не будет работать для старых браузеров). Это хорошо отображается в IE7 и выше. Однако я наткнулся на проблему с вашей навигацией - IE6 поддерживает псевдокласс :hover только для элементов a, поэтому селекторы типа li:hover не будут работать. Тем не менее, вы не можете поместить свои подменю в элемент a родительского пункта меню, потому что у вас не может быть ссылок внутри ссылок. Я не уверен, возможно ли сделать это выпадающее меню в IE6 без использования JavaScript. Кроме этого, навигация, кажется, единственная вещь, которая сейчас портится в IE6.

Answer 2

Вместо использования float: left на #sitenav li вы можете попробовать:

#sitenav {
    display: table;
}

#sitenav ul {
    display: table-row;
}

#sitenav li {
    display: table-cell;
}

Вам также следует рассмотреть возможность использования условных комментариев , чтобы скрыть набор таблиц стилей только для IE от другихбраузеры, особенно таблица стилей, предназначенная для чего-то старого и чарующего, как IE6.Если вы ничего не получаете для работы с голым CSS и условными комментариями, вам следует попробовать HTML5 Shiv и выполнить разметку с помощью HTML5 (что, я полагаю, вам следует в любом случае).