Question

我正在尝试使用CSS创建一个树。

在FF工作正常，IE6-7失败。

我有一个ul / li结构，在里面我创建了一个表来显示树行。

在IE上，我和li之间存在差距。

以下是代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE 6-7 Fails</title>

<style>
.table th {white-space:nowrap; font-weight:bold;background:#EDEFF4;
padding:6px;color:#111;border-right:1px solid #D8DFEA;border-bottom:1px solid #D8DFEA}
.table th.last-child {border-right:0px solid #D8DFEA}

.table tr td {padding:6px;border-bottom:1px solid #D8DFEA;background:#ccc}
.table tr td a {color:#525252;display:block;}
.table tr td a:hover {color:#3B5998}

#wrap {margin:5px 0 0 0;color:#525252;
            border-top:1px solid #D8DFEA;
            border-right:1px solid #D8DFEA;
            border-left:1px solid #D8DFEA;
}

ul#tree  {list-style-type:none;margin:0px;padding:0px}
ul.tree {list-style-type:none;}
ul.tTree {list-style-type:none;margin:0px;padding:0px}
li.tree {margin:0px;padding:0px;}

li.tree  ul{list-style-type:none;margin:0 auto;padding:0 0 0 30px;}
li.tree  ul li{list-style-type:none;margin:0 auto;}


</style>

</head>
<body>


<div id="wrap">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="table">
<tbody>
    <tr >       
        <th class="last-child" style="text-align:left;">Name</th>   
    </tr>
 </tbody>
</table>

    <div id="treeWrap">   
    <ul id="tree">
        <li id="tree-1" class="tree">
            <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table">
                <tbody>
                    <tr id="gridRow_1">
                        <td >
                            <a href="...">Title</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li id="tree-2" class="tree">
                    <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table">
                        <tbody>
                            <tr id="gridRow_2">
                                <td >
                                    <a href="...">Title</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
            </ul>
        </li>
    </ul> 
    </div>

</div>

</body>
</html>

糟糕的编程或某种错误？

欢迎任何建议。

Answer 1

这将解决您的问题：

.table {vertical-align：top}

或作为IE-Hack：

.table {* vertical-align：top}

Answer 2

另一种解决方案，如果有人想知道：

该表是一个块元素，这就是IE将其放在下一行的原因，但您可以通过将此样式信息添加到表中来将显示模式更改为内联

style="display: inline-table"

IE6-7里面的表留有差距

2 个答案: