IE7 ブラウザーの疑似要素 (: before、: after、: last-child) に問題があります。
実際、このキャプチャ (IE11) のようなツリーを描きたかったのです。
しかし、（IE7）でインデックスを実行すると、レンダリングが間違っています：
詳細については、私はすでに Selectivizr (CSS3 セレクターを利用できるようにする JavaScript ライブラリです) を使用していますが、機能していません!
このコードは、私が使用するプロジェクト構造のような例です (struts2、dojo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tree</title>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
<link href="demo1.css" rel="stylesheet">
</head>
<body>
<div class="test">
<div>
<a href="#"> + </a>
<a href="#"> Label A </a>
</div>
<ul class="recherche_non_rendu">
<li>
<div class="test">
<div>
<a href="#"> + </a>
<a href="#"> Label A1 </a>
</div>
<ul class="recherche_non_rendu">
<li>
<div class="test">
<div>
<a href="#"> + </a>
<a href="#"> Label A11 </a>
</div>
</div>
</li>
<li>
<div class="test">
<div>
<a href="#"> + </a>
<a href="#"> Label A12 </a>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
そして私のスタイルのCSS：
.test ul {
padding:0;
margin: 0;
margin-left:6px;
list-style:none;
background: #fff;
color:#000;
position:relative;
}
.test ul:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid #000;
}
.test li {
margin:0;
padding:0 16px;
line-height:2em;
font-weight:bold;
position:relative;
}
.test li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid #000;
margin-top:-1px;
position:absolute;
top:1em;
left:0;
}
.test li:last-child:before {
background:white;
height:auto;
top:1em;
bottom:0;
}
どんな助けでも大歓迎です。