JS左侧列表点击标题伸缩的效果，IE6BUG
如上图所示效果，刚才又研究了下原因找到了，因为IE6默认的“标题”和“内容”必须得在一个容器里，所以在“标题”和“内容”DIV的外面再加一个DIV，这样在IE6里就不会有BUG了，或者在“title”的DIV里加一句“background-color:transparent;具体这句话是什么意思，我也百思不得其解，欢迎感兴趣的朋友一起探讨！”这个就好用了。以下红色的代码是解决问题的关键，可以在样式表里写一句话解决，也可以在布局的时候规范些即把标题跟内容放在一个容器里，这样就不会出现这个问题了。
下面是演示代码，亲可以试一下效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS左侧列表点击标题伸缩的效果，IE6BUG</title>
<style type="text/css">
body{ margin:0px; padding:0px; font:12px/22px "宋体"; color:#313131; background:url(../images/bg_body1.png) repeat-y center top; background-color:#a8a8a8;}
body ul,li,form,dl,dt,dd,h1,h2,h3{ float:left; margin:0px; padding:0px; overflow:hidden; display:inline;}
body li{ list-style:none;}
body font,h1,h2,h3{ font-size:12px;}
.font13{ font-size:13px;}
.font14{ font-size:14px;}
.font16{ font-size:16px;}
.font18{ font-size:18px;}
/*.font-red{ color:#dc1100;}*/
.fontfamilywei{ font-family:"微软雅黑";}
.fontfamily-aril{ font-family:Arial, Helvetica, sans-serif;}
.flleft{ float:left;}
.flright{ float:right;}
.divfl{ overflow:hidden; display:inline;}
.lineheight5{ float:left; width:100%; height:5px; overflow:hidden; display:inline;}
.lineheight10{ float:left; width:100%; height:10px; overflow:hidden; display:inline;}
.lineheight20{ float:left; width:100%; height:20px; overflow:hidden; display:inline;}
a:link,a:visited{ color:#313131; text-decoration:none;}
a:hover{ color:#a9222b; text-decoration:none;}
a:active,a:focus{ outline:none;}
#case-main{ width:972px; margin:0px auto; overflow:hidden;}
#case-main #case-main-L{ width:160px; background:#f6eee3;}
#case-main #case-main-L .case-main-L-main{ width:144px; margin:9px;}
#case-main #case-main-L .case-main-L-main .case-title{ width:100%; border-bottom:#e7a546 solid 1px; line-height:30px; /*background-color:transparent;这句是关键*/}
#case-main #case-main-L .case-main-L-main .case-main{ width:100%; padding-bottom:5px; background:#9C9;}
#case-main #case-main-L .case-main-L-main .case-main ul{ width:100%;}
#case-main #case-main-L .case-main-L-main .case-main ul li{ width:100%; line-height:25px;}
#case-main #case-main-R{ width:800px;}
#case-main #case-main-R .case-main-R-main{ width:768px; text-indent:2em;}
#case-main #case-main-R .case-main-R-main-pic{ width:768px;}
</style>
<script type="text/javascript">
function bb(a)
{
for (i = 1; i < 5; i++)
{
if (i==a&&document.getElementById("case-L"+i).style.display == 'none')
{
document.getElementById("case-L"+i).style.display = 'inline';
}
else
{
document.getElementById("case-L"+i).style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="case-main">
<div id="case-main-L" class="flleft" style="overflow:visible;">
<div class="case-main-L-main flleft divfl">
<div style="float:left; overflow:hidden; display:inline; width:100%;">
<div class="case-title flleft divfl font14"><strong><a href="javascript:bb(1);">标志设计</a></strong></div>
<div class="case-main flleft divfl mt4" id="case-L1">
<ul>
<li><a href="">大连心乐乳业</a></li>
<li><a href="">某某VI设计</a></li>
<li><a href="">阳光食品</a></li>
<li><a href="">某某VI设计</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>
</div>
<div style="float:left; overflow:hidden; display:inline; width:100%;">
<div class="case-title flleft divfl font14"><strong><a href="javascript:bb(2);">包装设计与造型设计</a></strong></div>
<div id="case-L2" class="case-main flleft divfl mt4" style="display:none;">
<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>
</ul>
</div>
</div>
<div style="float:left; overflow:hidden; display:inline; width:100%;">
<div class="case-title flleft divfl font14"><strong><a href="javascript:bb(3);">后期推广策划</a></strong></div>
<div id="case-L3" class="case-main flleft divfl mt4" style="display:none;">
<ul>
<li><a href="">后期推广策划</a></li>
<li><a href="">后期推广策划VI设计</a></li>
<li><a href="">后期推广策划</a></li>
</ul>
</div>
</div>
<div style="float:left; overflow:hidden; display:inline; width:100%;">
<div class="case-title flleft divfl font14"><strong><a href="javascript:bb(4);">展示空间设计</a></strong></div>
<div id="case-L4" class="case-main flleft divfl mt4" style="display:none;">
<ul>
<li><a href="">展示空间设计</a></li>
<li><a href="">展示空间设计VI设计</a></li>
<li><a href="">展示空间设计</a></li>
<li><a href="">展示空间设计</a></li>
</ul>
</div>
</div>
<div class="lineheight20"></div>
</div>
</div>
</div>
</body>
</html>
原载: 大连网站建设 http://www.noonenet.cn/
