这个css问题太让人抓狂了

towjzhou 2008-08-22

这段代码，不知道为什么在IE7下面二行文字之间会有一个空行，怎么调也去不掉。这类ul内套ul应该是常用的结构，有人发现这个问题了吗？

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>html test</title>
    <style type="text/css">
        * { padding: 0; margin: 0; }
        ul { list-style: none; }
    </style>
</head>
<body>
<ul id="categories">
    <li class="group">
        <div>Line 1</div>
    </li>
    <li class="group">
        <ul><li>Line 2</li></ul>
    </li>
</ul>
</body>
</html>

hustKiwi 2008-08-26

把ul { list-style: none; } 改成ul { list-style: none; height: 0px; } 就可以了。
如果遇到其他ie浏览器兼容性问题，最简单的就用“#”或“_”规则调整就可以。
比如：

#ul {
  margin-top: 10px;    // for standard
  #margin-top: 20px;  // for ie7
  _margin-top: 15px;   // for ie6
}

wuhua 2008-09-08

我排版后的结果怎么是这样的啊？

1. 2. 3. 4. 5. 6. 10. 11. 12.
13.
14.
Line 1
15. 16.
17.
Line 2
18. 19.
20. 21.

上面怎么会出现 1. 2. 3啊

wintershan 2008-10-27

我试了试，只需要给li定义一个border就可以不出现空行了，但是还没搞清楚为什么要这样加？
li { border:1px solid #fff; }

KingTiger 2008-11-24

建议ul里一定要写margin:0;padding:0;

即
ul{margin:0;padding:0;}
li{list-style:none;}

tianyazjq110 2009-03-25

给li加上zoom:1就可以了。

agameplay 2010-11-05

tianyazjq110 写道

给li加上zoom:1就可以了。

这个做法是对的，还有一个做法是对父级UL加上

overflow:hidden;

这个我的理解是高度自动适应，使用了之后能完全体现流动式布局。

wangjeaf 2010-12-15

主要是没有layout，设置height、border、zoom都可以迫使元素拥有layout。
另外，display的inline-block也可以。
把ul的样式设置改为：

ul { 
    list-style: none; 
    display : inline-block;
}

xjlsgcjdtc 2011-01-28

wangjeaf 写道

主要是没有layout，设置height、border、zoom都可以迫使元素拥有layout。
另外，display的inline-block也可以。
把ul的样式设置改为：

ul { 
    list-style: none; 
    display : inline-block;
}

正解

yatou_0209 2011-09-02

hustKiwi 写道

#ul {
  margin-top: 10px;    // for standard
  #margin-top: 20px;  // for ie7
  _margin-top: 15px;   // for ie6
}

这个方法或者display : inline-block; 这个都是好用的。试了。

发表回复

>>返回群组首页

这个css问题太让人抓狂了

相关讨论

相关资源推荐