IE8 не учитывает переопределение правила CSS

#html #css #internet-explorer-8 #overriding #css-selectors

#HTML #css #internet-explorer-8 #переопределение #css-селекторы

Вопрос:

Я потратил на это последние 2 часа, и я понятия не имею, что не так и как это исправить.

Давайте предположим, что следующий HTML:

 <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE8 test</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div id="myDiv">
        <p>First line - bla bla bla bla bla bla bla bla bla</p>
        <p>Second line - bla bla bla bla bla bla bla bla bla</p>
        <p class="red last">Third line - bla bla bla bla bla bla bla bla bla</p>
    </div>
</body>
</html>

И этот CSS:

 @charset "UTF-8";

#myDiv {
    border: 1px solid green;
}

#myDiv p {
    text-align: center;
}

#myDiv p:first-child {
    text-align: left;
}

#myDiv p.last, #myDiv p:last-child { /* THIS IS WHAT DOESN'T WORK IN IE8 */
    text-align: right;
}

.red {
    color: red;
}

Очевидно, что это должно центрировать весь текст в div, но затем поместить первую строку слева, а последнюю строку справа. Он работает безупречно в новых браузерах, но IE8 терпит неудачу (о, какой сюрприз …).

Похоже, что это не соблюдается #myDiv p.last, #myDiv p:last-child . Я добавил class="last" , поскольку IE8 не знает last-child , но в любом случае, text-align:center просто НЕ переопределяется text-align:right . У кого-нибудь есть идея, как это исправить? Мне действительно нужно, чтобы это работало в IE8. Большое спасибо!

1. @raina77ow Черт возьми, ты прав, я не могу поверить, что потратил столько времени на это! Большое спасибо, пожалуйста, добавьте это в качестве ответа, чтобы я мог принять его.

Ответ №1:

Вы должны оставить только #myDiv p.last в селекторе. Поскольку :last-child выражение селектора не распознается IE8, оно просто игнорирует все правило (как потенциально недопустимое).

Это общее эмпирическое правило (предписанное стандартом): браузер не может понять селектор => браузер игнорирует его (вместе с соответствующим правилом).

Ответ №2:

: последний дочерний элемент не поддерживается в IE8. Смотрите здесь: http://caniuse.com/#search=last-child

1. Это было упомянуто в вопросе (= я это знаю). Чего я не знал, так это того, что IE игнорирует все правила в случае использования последнего дочернего элемента.

2. упс. извините за это, @Fygo — Должен был полностью прочитать последнее сообщение, которое вы добавили туда, прежде чем переходить к ответу. Рад, что у вас получилось.