CSS: замена таблицы и ячейки таблицы для IE7

Question

http://jsfiddle.net/vByVD/9/

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

Я узнал, что это потому, что они не поддерживают table-table-cell.

Я пробовал некоторые хаки, как вы можете видеть в первых строках CSS, но это не совсем работает, это показывает только 3 li по горизонтали, а затем создает новую строку и показывает другие li.

Я хочу, чтобы он отображался как другие новые браузеры, поэтому его по одной строке по горизонтали.

Как я могу сделать эту работу?

Answer 1

Есть два способа сделать это.Первый:

#header-nav{
    overflow: hidden;
    zoom: 1; /* IE6 and below work around */
}

#header-nav li{
    float: left;
    margin: 0;
    padding: 0;
}

#header-nav li a{
    display: block; /* if you want height and width */
    }    

Второй:

#header-nav li{
    margin: 0;
    padding: 0;
    display: inline;
}

Лично я использую первый из двух, так как он обеспечивает немного больше контроля над стилем блока для цвета, ширины, высоты,поля, отступы и т. д. Плюс, когда вы делаете: наведите курсор мыши на всю рамку;не только текст.Моя рекомендация - не использовать таблицы.Результаты непредсказуемы, как вы видели.Не говоря уже о том, что теперь проще добавлять подменю, используя JQuery или CSS.