Я полагаю, вы говорите о верхней навигации; вы дополняете встроенный элемент (тег <a>). При размещении заполнения на встроенном элементе горизонтальное заполнение будет давить на другие элементы, но вертикальное заполнение просто увеличит размер элемента, не влияя на расположение вокруг него. Вероятно, Firefox отображает поля над элементами под ними в источнике, но по какой-то причине IE отображает их ниже, именно поэтому вы видите, что части блока исчезают.
Чтобы решить эту проблему, поместите все оставленные ссылки (что по сути превращает их в блочные элементы). Вам нужно будет изменить свою разметку в другом месте, чтобы она работала (вероятно, возникнут некоторые проблемы с очисткой, если вы просто плаваете сразу), но это должно решить эту конкретную проблему IE.
Отредактировано для более подробной информации:
Как упоминалось выше, вертикальное заполнение для встроенного элемента не ведет себя так, как вы ожидаете (оно увеличивает высоту элемента, но поскольку заполнение не взаимодействует с другими элементами страницы, встроенный элемент часто накладывается на вещи странным образом. ). Поэтому, чтобы это исправить, вам нужно, чтобы у дополненного элемента (тег <a>) было display: block. Чтобы держать все на одной линии, плавающий влево ваш лучший выбор. Вот разметка и стиль, который я бы использовал:
<style type="text/css">
.mainnav {
font-size: 1em;
color: #999;
list-style-type: none;
/* zoom triggers hasLayout on IE, ignored by others
Necessary for the clearfix */
zoom: 1;
}
.mainnav:after {
/* This lets the .mainnav auto-clear its floated contents */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mainnav li {
float: left;
margin: 0 2px;
/* Place background (disc image) here w/ appropriate padding */
}
.mainnav li.last {
background: none;
}
.mainnav a:link, .mainnav a:visited {
display: block;
color: #fff;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px transparent;
}
.mainnav a:hover {
color: #fff;
background: #999;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px #ccc;
}
.mainnav a.selected, .mainnav a.selected:hover {
color: #B59B24;
background: transparent;
text-decoration: none;
}
</style>
<ul class="mainnav">
<li><a href="/" class='selected'>Home</a></li>
<li><a href="/About" >About</a></li>
<li><a href="/Admissions" >Admissions</a></li>
<li><a href="/Curriculum" >Curriculum</a></li>
<li><a href="/Home/VacancyList" >Careers</a></li>
<li class="last"><a href="/Contact" >Contact</a></li>
</ul>
Некоторые вещи, на которые следует обратить внимание: я использую стандартное исправление (Google, если вы не знаете, о чем я говорю), чтобы убедиться, что UL очищает всплывающее содержимое. Это позволит соответствующим образом увеличить размер родительских навигационных элементов, если пользователь увеличит размер шрифта.
Также я удалил проставку · и рекомендую использовать фоновое изображение и класс .last в CSS. Это чисто личное предпочтение. (В идеальном мире вы должны использовать псевдокласс: after для внедрения ·, но благодаря IE 6 не поддерживает его, вы не можете сделать это и поддерживать все браузеры.) Моя причина рекомендовать фоновое изображение вместо того, чтобы просто оставлять их в разметке, это приводит к более чистой разметке и гораздо проще изменить их в будущем (если, скажем, ваш клиент решил, что ему нужна труба, а не точка).
Логика, лежащая в основе этой разметки / стиля, заключается в том, что вам нужно заполнить <a>, чтобы цвет границы / фона работал, что означает, что он должен иметь display: block. Однако при добавлении ссылки каждая ссылка будет находиться на отдельной строке, поэтому вам нужно переместить ее или ее родителя. Поскольку он является частью списка, проще поместить родительский элемент li и использовать прозрачное исправление, чтобы убедиться, что ul все еще присутствует на странице.
Очевидно, что если вы используете этот код, вам нужно будет удалить большую часть #nav_banner element вещей внизу таблицы стилей, и вам, вероятно, придется снова отлаживать кросс-браузер. Даже если вы этого не сделаете, мы надеемся, что в будущем у вас появятся идеи для упрощения построения топовой навигации.