兼容问题：让IE6\IE7支持first-child和last-child的两种方法,expression和jquery

我们知道first-child不兼容ie6 ie7浏览器，如果可以让其兼容ie6 ie7浏览器那么可以解决不少问题，如何让first-child兼容ie6 ie7呢。

例子：

<ul>
    <li>123</li>
    <li>234</li>
    <li>345</li>
    <li>456</li>
</ul>

css为

li{padding-left:80px;border-bottom:2px solid #ccc}
li:first-child{padding-left:0px;
}

那么展现如下（请用非IE6，IE7看本例）

我们发现此种写法在IE6，IE7下不生效，

解决方法：

 方法一    

其实只用加上

li{padding-left:80px;border-bottom:2px solid #ccc;*padding-left:expression(this.previousSibling==null?"0":"80px");}

即可

*padding-left:expression(this.previousSibling==null?"0":"80px");

其中previousSibling代表第一个，0代表第一个lipadding-left的值，80px代表其他li的值，

IE6前台效果如下，

同理，如果想改变最后一个的padding-left的值可以用如下写法：

*padding-left:expression(this.nextSibling==null?"0":"80px");

其中，nextSibling代表最后一个，0和80px同上,但是nextSibling和previousSibling是有区别的，nextSibling不支持IE8所以尽量不要用它，用方法二代替，或者尽量用previousSibling。

IE6前台效果如下

就这么简单，到这里我想大家对解决IE6 IE7下first-child和last-child不兼容的问题已经有眉目了，现在我们再来深入探讨一下expression属性，

css中的expression属性IE5开始得到支持，后因标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对css expression的支持。所以IE5，IE6，IE7都支持expression，IE8以上不支持

其中 this.previousSibling 代表可以获取到元素的兄节点，如果不存在兄节点，就说明这个元素为第一个节点。

而expression_r是css表达式，可以理解为在css里可以书写javascript语句，那么expression_r(this.previousSibling == null ? "none" : "solid");的意思是，如果这个元素没有兄节点（也就是它是第一个节点），返回none，否则返回solid

CSS expressions(CSS表达式)是一种功能非常强大的方法，可以实现页面的动态设置属性，但兼容性较差，同时也有着非常恐怖的缺点；

例如，在IE6中，不支持应用了position:absolute属性的height:100%。可以使用 ： height:expression(it.parentNode.offsetHeight+'px';);

这个方法存在一个很可怕的隐患，它会频繁的计算（超出大部分设计者的预期）；

在以下情况，会导致 css expressions的频繁执行。

1.网页打开时。（<10次）

2.每次重置浏览器大小。（1次）

3.拉动设置浏览器大小。（每拉动一像素计算1次）

4.在页面有文字区域滑动鼠标（鼠标每滑动一像素计算1次）

使用了css expressions的页面，css表达式很容易就被计算上万次，导致机器变慢，浏览器卡死，cpu占用过高等疾病，所以expression还是少用为妙。

   方法二    

jquery方法，此方法也挺简单

步骤1：头部引入jquery.js

步骤2：底部加入

<script type="text/javascript">
    $("li:first").css("padding-left","0")
</script>

OK，大功告成啦

本文主要详细介绍CSS自定义属性expression，如大家还有意思，可以联系我QQ32362389，希望此文对大家有帮助，喜欢了点个赞吧~