: селектор псевдоклассов last-child в CSS и Internet Explorer

Question

У меня есть следующий код:

ul.myList li{
     border-right: 1px dotted #000;
}

Однако в последнем элементе мне нужно удалить эту границу, поскольку дизайн, из которого я работаю, диктует, что последний элемент не требует границы в качестве разделителя.

Итак, мне нужно нацелиться на последнего ребенка в списке, и поэтому в моем CSS я добавил

ul.myList li:last-child{
     border-right: none;
}

Что, как мы все знаем, прекрасно работает в Firefox, Safari и Chrome.

Проблема заключается в том, что мы просматриваем страницу в Internet Explorer с 6 по 8.

Answer 1

Итак, покопавшись, я нашел ответ:

Если в браузере IE <8, укажите таблицу стилей следующим образом: </p>

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->

И в вашей таблице стилей IE укажите следующие правила:

ul.myList li{
     border-right: expression(this.nextSibling==null?'none':'inherit');
}

Выражение nextSibling проверяет, есть ли после него элемент, и если оно наследует правило, указанное в таблице стилей по умолчанию, в противном случае оно применяет новое правило.

Более подробную информацию можно найти здесь

Answer 2

Поскольку Internet Explorer до версии 9 (которая все еще находится в разработке) вообще не поддерживает селектор :last-child, моим лучшим решением, к сожалению, было бы установить класс или идентификатор для последнего элемента в вашем списке и попробоватьчтобы выбрать это.

Конечно, если оставить правую границу для IE не нарушит компоновку полностью, вы можете оставить свой код как есть, если вы не возражаете, IE просто испортил рендерингнемного.

Answer 3

IE8 <не поддерживает этот псевдо-селектор. Проверьте <a href="http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx" rel="nofollow"> MSDN статью для всех поддерживаемых функций:)

Вы можете взглянуть на это решение jQuery для Включить псевдоселекторы в IE или просто оставить его как есть в IE.

Answer 4

Вы можете сделать это с помощью jQuery. Так что вместо того, чтобы полагаться на CSS. Используйте селекторы jQuery, чтобы установить свойство вашего последнего элемента. Я понимаю, что вы не пометили свой вопрос им.

jQuery('ul.myList li:last-child').css("Key","value");