其实就是我那里是一个商品的系列
因为不定他会有多少个类别
本来每一行显示5个，但要是有100个的话就会有20行，这样肯定很难看
所以我就给第行定个高度为22px
再加了个DIV在外面
计算DIV的高度如果大于44的时候就显示那个“显示全部的按钮”
如果他小于或＝于2行就什么也不干要求是要兼容IE和FireFox主要是兼容问题谢谢
因为不定他会有多少个类别
本来每一行显示5个，但要是有100个的话就会有20行，这样肯定很难看
所以我就给第行定个高度为22px
再加了个DIV在外面
计算DIV的高度如果大于44的时候就显示那个“显示全部的按钮”
如果他小于或＝于2行就什么也不干要求是要兼容IE和FireFox主要是兼容问题谢谢
<html lang="utf-8" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.search_cat {
clear: both;
padding-right: 0px;
padding-left: 0px;
background: url(../images/dot_line.gif) repeat-x left bottom;
padding-bottom: 5px;
margin: 9px 0px 10px 10px;
width: 724px;
padding-top: 0px;
} .search_cat P {
padding-right: 0px;
padding-left: 18px;
background: url(../images/cat_arrow.gif) no-repeat left 2px;
padding-bottom: 0px;
margin: 0px 0px 3px;
padding-top: 0px;
} .search_cat LI {
float: left;
width: 140px;
list-style-type: none;
height: 22px;
} .search_cat .cat_num {
font-size: 10px;
} .search_cat A {
color: #333399;
text-decoration: none;
}
</style>
</head>
<body>
<div width="600" id="d1" style="background:red" align="center">
dddddddddd
</div>
<table width="600" border="0">
<tr>
<td>
<!-- BEGIN UseCat -->
<ul class="search_cat">
<p>
按<b>系列</b>选择：<span id="_spnSeries" style="display:none; padding-left: 15px; background: url(images/category_view_all.gif) rgb(255,255,255) no-repeat 0% 0%; color: rgb(34,34,34); cursor: pointer;" onclick="ShowHideSeries(this)">显示所有</span>
</p>
</ul>
<div class="search_cat" id="_divSeries" style="work-break:break-all;overflow:hidden;background:blue;">
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0557'>明星系列</a>
<span class="cat_num">(22)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0558'>小卡漫系列</a>
<span class="cat_num">(7)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0562'>欧罗系列</a>
<span class="cat_num">(2)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0568'>雅汀系列</a>
<span class="cat_num">(1)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0569'>小玛莉珍系列</a>
<span class="cat_num">(1)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0570'>迪斯尼系列</a>
<span class="cat_num">(16)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0575'>爱丽丝系列</a>
<span class="cat_num">(2)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0587'>尼克国际系列</a>
<span class="cat_num">(1)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0593'>玛莉珍系列</a>
<span class="cat_num">(15)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0613'>美琳蒂系列</a>
<span class="cat_num">(3)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0656'>普玛系列</a>
<span class="cat_num">(6)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0683'>艾适佳系列</a>
<span class="cat_num">(5)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0692'>运动埃拉系列</a>
<span class="cat_num">(4)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0708'>字母系列</a>
<span class="cat_num">(1)</span>
</li>
<li>
<a href='http://10.60.6.105/Crocs/List.htm?SeriesCode=0719'>奥黛丽系列</a>
<span class="cat_num">(5)</span>
</li>
</div>
</td>
</tr>
</table>
<!-- END UseCat -->
<script type="text/javascript">
window.onload = function(){
var _divSeries = document.getElementById("_divSeries");
if (_divSeries.offsetHeight > 41) {
document.getElementById("_spnSeries").style.display = "";
document.getElementById("_spnSeries").style.display = "";
_divSeries.style.height = "41px";
}
}
function ShowHideSeries(obj){
if (obj.innerHTML == "显示所有") {
obj.innerHTML = "精简显示"
var _divSeries = document.getElementById("_divSeries");
_divSeries.style.height = "";
}
else {
obj.innerHTML = "显示所有"
var _divSeries = document.getElementById("_divSeries");
_divSeries.style.height = "41px";
}
}
</script>
</body>
</html>
问题的主要原因是由于 div被插入到 ul, li之间，
从而破坏了DOM的合理结构。
超成DIV的高度计算不正确。楼主从新调整一下文档的结构以及CSS的定义就可以解决这个问题了。
HOHO。
首先把 </ul>移动到 div的上面去了。
然后把44变成41了。注意这只是用来示意问题的所在。