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

来源：互联网发布：哪个软件租车最便宜编辑：程序博客网时间：2024/06/08 06:38

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

当我把如下代码中，前面的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;}

0 0