Подписка
Email
Fb
RSS
Twitter
Email

Эффект лестницы в IE

баг иеВсем привет!

Сегодня, в этой маленькой заметке хочу рассказать, как бороться с одним багом в IE.

Речь пойдет о так называемом «эффекте лестницы». Что это такое? Начнем с того, что каждый верстальщик в своей работе использует списки, например, для создания навигации. Для этого создается список, а в контейнер тега li помещаются ссылки.

Для примера возьмем такой код:

HTML:

<ul>
    <li><a href="#">Меню</a></li>
    <li><a href="#">Меню</a></li>
    <li><a href="#">Меню</a></li>
    <li><a href="#">Меню</a></li>
</ul>

CSS:

ul {
list-style: none;
}
ul li a {
display: block;
width: 145px;
height: 20px;
text-align: center;
color: #fff;
float: left;
background: #C63;
border: solid 1px #900;
margin: 35px 10px;
}

Выглядеть это должно так:

Эффект лестницы в IE

Все хорошо, но откроем-ка данный файл в IE 7, что видим?

Эффект лестницы

Не совсем то, что нам нужно, правда? Давайте все исправим.

Можно сделать так:

ul li {
float: left;
}

Либо так:

ul li {
display: inline;
}

Теперь все выглядит как надо!

Вы можете оставить комментарий.

6 комментариев к записи “Эффект лестницы в IE”

  1. олег:

    ура новый пост!

  2. так всегда и делал. про этот эффект лестницы впервые узнал) но спасибо!

  3. олег:

    А про JawaScript посты будут.

  4. Alex:

    Автору респект!Думал как это исправить — пока не набрал в яндексе «в IE меню лесенкой скачет», после чего в первой выдаче стояла данная страница. Кратко и понятно...Спасибо!)

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика