文章/答案/技术大牛

发布

社区首页 >问答首页 >IE6-7表在li中留下了空白

问IE6-7表在li中留下了空白
EN

Stack Overflow用户

提问于 2010-02-11 20:20:03

回答 2查看 1.6K关注 0票数 2

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

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

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

在IE上，我在li和table之间有一个差距。

代码如下：

    <!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>

是糟糕的程序设计还是某种bug？

欢迎提出任何建议。

css

list

tree

html-table

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-02-11 20:31:54

这会解决你的问题：

.table {垂直对齐:顶部}

或IE-Hack:

.table {*垂直对齐:顶部}

票数 3

Stack Overflow用户

发布于 2012-11-14 23:03:52

如果有人想知道的话还有另一个解决方案：

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

style="display: inline-table"

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2244308

复制

相似问题

问IE6-7表在li中留下了空白
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE6-7表在li中留下了空白EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE6-7表在li中留下了空白
EN