У меня есть горизонтальное меню CSS на этой странице:
http://72.47.251.205/ak9
В Chrome, Safari и Internet Explorer 8 оно отображается идеально.В FireFox 4 каждый <li> немного узкий, оставляя разрыв между двумя последними элементами.
Вот краткий пример HTML:
<ul id="top-nav">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 1</a></li>
<li class="last-item"><a href="#">Menu Item 1</a></li>
</ul>
И CSS:
#top-nav {
position: relative;
}
#top-nav li {
float: left;
height: 46px;
line-height: 46px;
width: auto;
}
#top-nav li.last-item {
position: absolute;
top: 0;
right: 0;
}
#top-nav li a {
display: block;
padding: 0 38px;
}
Я пытался использовать атрибут -moz-box-sizing CSS для тега body, но безрезультатно.
Спасибо всем, у кого есть идеи.
ОБНОВЛЕНИЕ
Мне стало известно, что FF 4 в Windows отображает это соответствующим образом, а IE 9 - нет.Похоже, что это кросс-платформенная и кросс-браузерная несогласованность.Это действительно начинает беспокоить меня.
Кроме того, я использовал абсолютное позиционирование на последнем элементе, чтобы убедиться, что он остается на одном уровне с div .wrapper, который держит все по центру.Таким образом, несоответствия браузера при отображении ширины блока никогда не смогут «разбить» меню, принудительно перенеся последний элемент во вторую строку, что несколько хуже, чем то, что происходит сейчас.