Jquery 使CSS3家谱与IE8兼容

我想使用，但我需要IE8的支持。主要问题似乎是

：before

和

：after

元素在应该隐藏的时候没有隐藏，如下图所示。（第一个孙子不应该有一条向左的线，最后一个孙子不应该有一条向右的线。）

我已经尝试了jQuery回退，但没有效果。这里是一个可以玩的，代码如下

//为旧IE添加类
jQuery（“.tree-li a:only-child，.tree-li:only-child”）.addClass（“only-child”）
/*现在是CSS*/
* {
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*我们将使用：：before和：：after来绘制连接器*/
.李树：之前，.李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：20px；
}
李树：以后呢{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
.tree li.独生子女：之后，.tree li.独生子女：之前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树，独生子女{
填充顶部：0；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
.tree li:第一个孩子：之前，.tree li:最后一个孩子：之后{
边界：0无；
}
/*将垂直连接件添加回最后一个节点*/
李树：最后一个孩子：以前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
/*从父级添加向下连接器的时间到了*/
树：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：20px；
}
李树先生{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*是时候使用一些悬停效果了*/
/*我们还将把悬停效果应用于元素的沿袭*/
.树李a:悬停，.树李a:悬停+ul李a{
背景：c8e4f8；
颜色：#000；
边框：1px实心#94a0b4；
}
/*悬停时的连接器样式*/
.tree li a:hover+ul li:：after、.tree li a:hover+ul li:：before、.tree li a:hover+ul:：before、.tree li a:hover+ul:：before{
边框颜色：#94a0b4；
}































导致额外边界的问题是，与之不同，伪类在IE8及以下版本中不可用。存在此无法识别的选择器将使整个规则无效，从而导致IE删除以下规则

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child:before, .tree li:last-child:after {
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child:before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

要解决这个问题，可以对这些元素使用相同的jQuery
addClass
策略

JavaScript:

jQuery(".tree li:last-child").addClass("last-child");

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child:before, .tree li.last-child:after {
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li.last-child:before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

CSS:

jQuery(".tree li:last-child").addClass("last-child");

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child:before, .tree li.last-child:after {
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li.last-child:before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

IE8中的屏幕截图：

工作示例（）：

$（窗口）.load（函数（）{
//为旧IE添加类
jQuery（“.tree-li a:only-child，.tree-li:only-child”）.addClass（“only-child”）；
jQuery（“.tree li:last child”）.addClass（“last child”）；
});
/*现在是CSS*/
* {
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*我们将使用：：before和：：after来绘制连接器*/
.李树：之前，.李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：20px；
}
李树：以后呢{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
.tree li.独生子女：之后，.tree li.独生子女：之前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树，独生子女{
填充顶部：0；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
.tree li:第一个孩子：之前，.tree li.最后一个孩子：之后{
边界：0无；
}
/*将垂直连接件添加回最后一个节点*/
最后一个孩子：以前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：之后{
B