CSS специфичность IE8

Question

У меня есть это правило CSS в моей таблице стилей для списка ссылок.первое - это общее правило для тегов <a>, а последние два - это конкретные правила для первого и последнего дочернего элемента с переключениями для псевдоклассов first-child и last-child

/* weight: (1 class) + (3 elements) = 13 */
.topNavigation ul li a { 
color: #666;
text-decoration: none;
display: block;
font-size: 28px;
margin: 5px 20px;
}

/*for both rules: (1 class + [1 pseudo class or 1 class]) + (3 elements) = 23 */
.topNavigation ul li:first-child a, .topNavigation ul li.first-child a {
margin-left: 0;
}
.topNavigation ul li:last-child a, .topNavigation ul li.last-child a {
margin-right: 0;
}

html - это:

<div class="topNavigation">
<ul>
    <li class="first-child current">
        <a href="#">home</a>
    </li>
    <li>
        <a href="#">services</a>
    </li>
    <li class="last-child">
        <a href="#">blog</a>
    </li>
</ul>
</div>

общая идея состоит в том, что ссылки содержатся в <li> и "разграничены" от краев <li>.проблема в том, что IE8 НЕ соблюдает специфику и все еще использует поля, указанные в первом правиле (margin: 5px 20px;).Я проверил его в IE7, IE9, Chrome и других браузерах, и только IE8 не следует.

Что-то не так с этим правилом?или я наблюдаю за ошибкой IE8?

Answer 1

Вы объединили селекторы псевдокласса и класса в этом правиле:

.topNavigation ul li:last-child a, .topNavigation ul li.last-child a {
margin-right: 0;
}

Поскольку IE <9 не понимает <code>:last-child, , оно должно игнорировать все правило (Я не уверен, почему он работает для вас в IE7: он должен ломаться одинаково как в IE7, так и в IE8), хотя он может понимать и применять правило для .last-child.Поэтому единственный отступ, к которому он может вернуться, - это ваш первый.

Технически, единственное решение для этого - разбить его на два правила, по одному для каждого селектора.

Но я предлагаю вампросто добавьте классы HTML.Поскольку вы уже делаете это для поддержки старых браузеров, можете также сохранить его, поскольку все браузеры поддерживают это:

.topNavigation ul li.first-child a {
margin-left: 0;
}
.topNavigation ul li.last-child a {
margin-right: 0;
}