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

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

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

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

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

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

Который, как мы все знаем, отлично работает в Firefox, Safari и Chrome.

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


css css-selectors pseudo-class
person Ant Ali    schedule 24.09.2010    source источник

Ответы (4)


arrow_upward
11
arrow_downward

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

Если используется браузер IE‹8, укажите следующую таблицу стилей:

<!--[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 проверяет, есть ли после него элемент, и, если есть, наследует правило, указанное в таблице стилей по умолчанию, если нет, применяет новое правило.

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

person Ant Ali    schedule 24.09.2010
comment
+1 Это ужасно, но может сработать. Плюс один от меня за то, что придумал работоспособное решение для IE. (И минус один миллион баллов IE за то, что в первую очередь заставил нас придумывать подобные хаки). Стоит отметить, что IE9 (в настоящее время в бета-версии) может поддерживать его, поэтому вы можете настроить [if IE] только для IE8 или ниже. - person Spudley; 24.09.2010
comment
Спасибо за ответ, я не был на 100% уверен, что IE 9 будет его поддерживать. Я изменю свой пост, чтобы отразить его для IE 8 и ниже. - person Ant Ali; 24.09.2010
comment
IE9 БУДЕТ поддерживать его, согласно их собственной документации. Каким бы надежным он ни был. - person Kyle; 24.09.2010
comment
@ Кайл, их документация обычно совершенно надежна. Просто их определение «поддержки» и «внедрения» иногда расплывчато и неполно. - person David says reinstate Monica; 24.09.2010

arrow_upward
2
arrow_downward

IE8‹ не поддерживает этот псевдоселектор. Все поддерживаемые функции см. в статье MSDN: )

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

person Kyle    schedule 24.09.2010

arrow_upward
2
arrow_downward

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

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

person Delan Azabani    schedule 24.09.2010

arrow_upward
1
arrow_downward

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

jQuery('ul.myList li:last-child').css("Key","value");
person sushil bharwani    schedule 24.09.2010