代码之家 › 专栏 › 技术社区 › ntan

IE6-7里边的桌子留有空隙

html-table tree list css

ntan · 技术社区 · 16 年前

我正在尝试使用css创建树。

FF工作正常,IE6-7失败。

我有一个ul/li结构,在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>

是编程不好还是有什么问题?

欢迎提出任何建议。

2 回复 | 直到 9 年前

Allan Kimmer Jensen 16 年前

这将解决您的问题:

.table{垂直对齐:顶部}

或者作为IE黑客:

.table{*vertical align:top}

samoncode 13 年前

如果有人想知道另一个解决方案:

表是一个block元素,这就是ie将其放在下一行的原因,但是您可以通过将此样式信息添加到表中来将显示模式更改为in line

style="display: inline-table"