CSS: Попытка правильно отформатировать горизонтальное меню, несовместимое с браузерами

Question

Я пытаюсь сделать горизонтальное меню красивым.
Вот пример того, как выглядит мой HTML.

<div id="menu">
<ul>
    <li><a class="selected" href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="labs.html">Labs</a></li>
    <li><a href="assignments.html">Assignments</a></li>
</ul>
</div>

Это фрагмент из моего CSS.Он работает в Firefox, но не в IE.

#menu {
margin:auto;
padding-top: 4px;
width: 800px;
}

#menu ul
{
float:left;
list-style-type:none;
margin:0;
padding:0;
padding-top:7px;
padding-left:20px;
}    

#menu li
{
font: 87.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
display:inline-block;
}

#menu a, #menu a.selected
{
text-decoration:none;
color:#000;
background-color:#fff;
background-image:url('../images/menu-unselected.jpg');
background-repeat:repeat-x;
padding-top:4px;
padding-bottom:0px;
padding-left:12px;
padding-right:12px;
border:solid;
border-width: 1px 1px 1px 1px;
border-color:#000;
}

#menu a.selected
{
padding-top:7px;
padding-bottom:1px;
border-width: 1px 1px 0px 1px;
}

#menu a:hover, #menu a.selected
{
background-image:url('');
}

Я могу внести изменения в CSS, чтобы он работал правильно в IE, но тогда он не работает в FireFox!Вот скриншоты кода выше, представленные в каждом браузере:

Firefox: здесь

Internet Explorer: здесь

Answer 1

Я склонен использовать display:inline-block; вместо float:left;, когда это возможно, и никогда не было проблем с кросс-браузерами.Так что я предлагаю вам использовать #menu li{ display:inline-block;}.

Очевидно, что все изменения относятся к вашей компоновке по умолчанию ... оболочки, страницы, тело, HTML и т. Д. И т. Д.

Answer 2

Измените display: inline-block; на display: inline; в вашем li.

Затем добавьте display: block; float: left; к вашему a.

Затем вы измените стиль вкладок стег a (такие как text-align, width и т. д.).

Answer 3

Это сработало для меня.

В #menu li вместо display: inline;замените его на float: left;

Затем в #menu a.selected используйте padding и margin для изменения положения выше остальных.Я добавил:

padding-bottom:4px;
padding-top:7px;
margin-top:5px;

дисплей: блок;на # меню кажется необязательным.Я на Mac в FF 7.0.1, и это выглядит правильно.Не могу увидеть это в IE.Надеюсь, это поможет.