Я знаю, что есть несколько способов заставить работать "lastchild" для Internet Explorer. CSS, кажется, не работает так хорошо.
Я читал о версии jQuery, но не уверен, как именно это сделать.
Мне это нужно только потому, что я использую стили списков с border-top и border-bottom для создания «теневых эффектов».
Вот мой сайт .
В верхнем меню навигации есть определение lastchild в файле javascript, но, похоже, оно не дает должного эффекта:
jQuery("ul.menu li:last-child").addClass("last-child");
jQuery("ul.menu li:first-child").addClass("first-child");
Оригинальный CSS был чем-то вроде этого, но в Firefox также отображаются границы слева и справа!:
.jqueryslidemenu ul li.first-child a{border-left:none}
.jqueryslidemenu ul.sub-menu li.first-child a{border-left:1px solid #444444!important}
.jqueryslidemenu ul li.last-child a{border-right:none}
.jqueryslidemenu ul.sub-menu li.last-child a{border-right:1px solid #444444!important}
/*IE6 hack to get sub menu links to behave correctly*/
* html .jqueryslidemenu ul li a{display: inline-block;}
Я изменил его на это, и теперь правая граница отображается только в IE!:
.jqueryslidemenu ul li:first-child a{border-left:none;}
.jqueryslidemenu ul.sub-menu li.first-child a{border-left:1px solid #444444!important;}
.jqueryslidemenu ul li:last-child a{border-right:none;}
.jqueryslidemenu ul.sub-menu li.last-child a{border-right:1px solid #444444!important;}
/*IE6 hack to get sub menu links to behave correctly*/
* html .jqueryslidemenu ul li a{display: inline-block;}