在IE678下用什么方法解决伪类last-child?


我知道可以通过给最后一个添加class,但是这个是所有浏览器下都添加class,那last-child不用都可以了。


这问题应该放在新手下面的,但习惯性直接在首页撰写,所以...


开始我是有找下解决的方法。
一般 last-child 都是用在菜单或者列表用边框分隔的时候,把最后面一个 border 的设定去掉。

一种方法是给最后一项添加一个 class ,例如 .last-child ,把 border 设为 none 值。(这个不便于数据绑定,不然又得判断最后一个,麻烦)。

一种方法是通过js把最后最后一项的边框值去掉,达到last-child的目的:


 if ($('html').hasClass('lt-ie9')) {
    $('[data-fix-last-child]').each(function () {
        var $me = $(this);
        var element = $me.data('fix-last-child');
        $me.find(element).last().css({ 'border': 'none','background': 'none' });
    });
}

但是上面两种方法都是所有浏览器下都生效,也就是不用 last-child 都可以了。当然也可以判断是IE678的时候才使用上面的方法,但没什么必要。

还有一种方法是使用:


 expression(this.nextSibling==null?'0':'1px');

没试过,因为不支持IE8。

css3 浏览器兼容性 css HTML internet-explorer

airfly 10 years, 10 months ago

还是用ie的html条件注释吧,在ie678的时候使用你写的那段js。

绯弹的亚莉亚 answered 10 years, 10 months ago

如果是为了做菜单列表分割的话,不妨考虑用左边框border-left,这样会导致第一个元素的左边框是多余的,但是因为所有的浏览器都支持first-child伪类的,所以你可以用first-child来设置第一个元素的border-left为none。以此来达到你想要的效果。

普通的魔法使 answered 10 years, 10 months ago

我公司只要兼容ie10以上就行(虽然老板说ie6..)

NEKO拉面 answered 10 years, 10 months ago

ixiaohei 说的对,ie6 不支持css3,所有想通过css是无法解决的。
题外话,现在很少人写ie6兼容了吧,就算写了,也是阉割版。

路过一下下 answered 10 years, 10 months ago

使用 JS 获得上级元素 UL ol 然后再给最后一个元素加样式

Baggio answered 10 years, 10 months ago

我记得ie678就不支持这个伪类last-child,这是css3里面的

蛋蛋皮破了 answered 10 years, 10 months ago

仅仅是分隔的场景的话,可以用first-child啊,让first-child没有上/左边框就好

、Cyd. answered 10 years, 10 months ago

Your Answer