今天在平时用的清理中的办法无法使用了，于是测试了多次，解决了。
再一次的鄙视IE浏览器。
<!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=gb2312" />
< title >法律导航 </title>
< style type ="text/css" >
/**
* @author xcf007
* @lastmodified 2008-12-6
*/
*{margin:0;padding:0;}
html
{
overflow:auto;
}
body
{
font-size:12px;
width:950px;
margin:0 auto;
}
ul
{
list-style:none;
}
a img
{
border:none;
}
a
{
text-decoration:none;
}
/*实用工具*/
#divUtils
{
width:170px;
}
#divUtils h3
{
font-size:14px;
background-color:#E7F3DC;
color:#008800;
line-height:26px;
_position:relative;
}
#divUtils h3 span
{
background-color:#fff;
display:inline-block;
border:1px solid #BBE1A6;
border-bottom:1px solid #fff;
padding:0 10px;
margin-left:5px;
}
#divUtils ul
{
border:1px solid #BBE1A6;
color:#BBE1A6;
font-size:14px;
line-height:180%;
/*关键问题在这里*/
overflow:auto;
_display:inline-block;
}
#divUtils ul li
{
_display:inline;
}
#divUtils ul a
{
color:#008800;
float:left;
margin:0 10px;
width:64px;
text-align:center;
}
#divUtils ul a:hover
{
text-decoration:underline;
}
</style>
</head>
< body >
<! --begin#内容区-- >
< div id ="divUtils" >
< h3 > < span >实用工具 </span> </h3>
< ul >
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
</ul>
</div>
<! --end#内容区-- >
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >法律导航 </title>
< style type ="text/css" >
/**
* @author xcf007
* @lastmodified 2008-12-6
*/
*{margin:0;padding:0;}
html
{
overflow:auto;
}
body
{
font-size:12px;
width:950px;
margin:0 auto;
}
ul
{
list-style:none;
}
a img
{
border:none;
}
a
{
text-decoration:none;
}
/*实用工具*/
#divUtils
{
width:170px;
}
#divUtils h3
{
font-size:14px;
background-color:#E7F3DC;
color:#008800;
line-height:26px;
_position:relative;
}
#divUtils h3 span
{
background-color:#fff;
display:inline-block;
border:1px solid #BBE1A6;
border-bottom:1px solid #fff;
padding:0 10px;
margin-left:5px;
}
#divUtils ul
{
border:1px solid #BBE1A6;
color:#BBE1A6;
font-size:14px;
line-height:180%;
/*关键问题在这里*/
overflow:auto;
_display:inline-block;
}
#divUtils ul li
{
_display:inline;
}
#divUtils ul a
{
color:#008800;
float:left;
margin:0 10px;
width:64px;
text-align:center;
}
#divUtils ul a:hover
{
text-decoration:underline;
}
</style>
</head>
< body >
<! --begin#内容区-- >
< div id ="divUtils" >
< h3 > < span >实用工具 </span> </h3>
< ul >
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
< li > < a href ="#" >法律词典 </a> </li>
</ul>
</div>
<! --end#内容区-- >
</body>
</html>
貌似又好了，怪怪的ie
我常用overflow:hidden;_display:inline-block;清理浮动，
今天这个不好使了，换了overflow:hidden;height:1%;可以又换回上面这个也可以了，怪事。。。。
补充:
标准点的清理浮动方法
.leftFloat{float:left;}
.rightFloat{float:right;}
.clearFloat{overflow:auto;height:1%;}
或
.clearFloat{overflow:hidden;width:100%;}
具体还要看下你的父容器选择合适的属性值，如果你想定宽度或者固定高度，就做相应调整。
本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/117606，如需转载请自行联系原作者
