ie6.7设置display:none时仍占位

最近做项目时，碰到一个奇怪的问题：

当我把如下代码中，前面的a用jquery设置成hide()时，ie6.7后面的a错位，说明前面的a在隐藏的时候，仍旧占位置。

js代码

$(document).ready(function(e) {
$("button").click(function(e) {
var index=$(this).index();
$(".lc_unwind, .lc_adesoft").hide();
$("#ade"+(index)).show();
$("#unwind"+(index)).show();
});
});

html代码

<div class="lc_dmorder">排序： <a href="javascript:;" title="升序/降序" target="_self" id="ade1" onclick="adesc('ade1','uid1');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind1" onclick="lcunwind('uid1','unwind1')" >展开</a> <a href="javascript:;" title="升序/降序" target="_self" id="ade2" onclick="adesc('ade2','uid2');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind2" onclick="lcunwind('uid2','unwind2')" >展开</a> <a href="javascript:;" title="升序/降序" target="_self" id="ade3" onclick="adesc('ade3','uid3');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind3" onclick="lcunwind('uid3','unwind3')" >展开</a> <a href="javascript:;" title="升序/降序" target="_self" id="ade4" onclick="adesc('ade4','uid4');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind4" onclick="lcunwind('uid4','unwind4')" >展开</a> </div>

解决办法：<span style="color:#ff0000;">修改js代码，不设置隐藏，通过定位，使a不在可见区域内

$(document).ready(function(e) {
$("button").click(function(e) {
var index=$(this).index();
$(".lc_unwind, .lc_adesoft").css({position: "absolute", top: "-999em"});
$("#ade"+(index)).css({position: "static"});
$("#unwind"+(index)).css({position: "static"});
});
});

网上搜了很久，发现有高手在解决ie6.7 div错位给了个好方法，记录一下，给元素设置背景色：

<div class="box clear">
<div class="list">box1</div>
<div class="list">box2</div>
<div class="hide">box3</div>
<div class="list">box4</div>
<div class="list">box5</div></div>

css

<pre name="code" class="html">.box {width: 440px;background: #0CF;padding: 5px;}
.list {width: 98px;height: 98px;margin: 5px;border: 1px solid #960;float: left;display:inline;/*IE6 bug*/background:#0CF;}
.clear:after {content: ".";display: block;height: 0;clear: both;}
.clear {zoom: 1;}
.hide{ display:none;}