最近做项目时,碰到一个奇怪的问题:
当我把如下代码中,前面的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" οnclick="adesc('ade1','uid1');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind1" οnclick="lcunwind('uid1','unwind1')" >展开</a> <a href="javascript:;" title="升序/降序" target="_self" id="ade2" οnclick="adesc('ade2','uid2');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind2" οnclick="lcunwind('uid2','unwind2')" >展开</a> <a href="javascript:;" title="升序/降序" target="_self" id="ade3" οnclick="adesc('ade3','uid3');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind3" οnclick="lcunwind('uid3','unwind3')" >展开</a> <a href="javascript:;" title="升序/降序" target="_self" id="ade4" οnclick="adesc('ade4','uid4');" class="lc_adesoft">降序↓</a> <a href="javascript:;" title="展开/收缩" class="lc_unwind" id="unwind4" οnclick="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;}