w3h5

CSS选择器 低版本IE浏览器的兼容

 CSS 后代选择器很好用,让我们的工作变的更方便。但是 IE8 及以下对很多后代选择器并不兼容。

例如这6个比较常用的后代选择器:

Child SelectorsIE9IE8IE7
:first-child
:last-child××
:nth-child(n)××
:nth-last-child(n)××
:first-of-type(n)××
:first-last-of-type(n)××

IE9 对这些后代选择器都兼容,IE8、IE7除了 :first-child ,其他5个都不兼容。  

例如:让第2个 p 标签变成“蓝色”字体。

常用的方法:

div p:nth-child(2) {
    color: blue;
}

或者:

div p:nth-of-type(2) {
    color: blue;
}

这样就能给第2个 p 标签添加颜色了。

如果要兼容IE:

第一种方法:

div > p:first-child + p {
    color: blue;
}

第二种方法:使用JQuery

if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器
    if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
        $('p:nth-child(2)').css('color','blue');
    }
}

JQuery也可以用 :nth-child(odd) 奇数,:nth-child(odd)  偶数 来处理。


列表边框问题:

选择最后一个元素:

一般 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。

纯css2方法:从第二个开始选择

有一种很简单的方法,纯CSS实现。

就是使用 element+element 即一个元素紧接着另一个元素选择器。因为 last-child 元素是没有紧跟这的元素的, element+element 为CSS2选择器。

举个栗子:

我们希望在每条记录之间加上分隔符,一般会加 border-bottom 属性,但是最后一个 <li> 下面不能有,我们可以使用 li+li 选择符,改用 border-top 属性即可实现。

li+li{border-top: 1px dotted #999;}


赞 (1)
分享到: +More |

评论 沙发

换个身份