求助!只有IE8才遇到的悲剧...

[adaikiss]

我有一个动态改变按钮列表的方法(其实按钮是一个DIV),当我点击页面上绿色箭头的时候,工具条就会出现如下图中的杭州这个按钮.
[img=http://hi.csdn.net/attachment/201007/27/0_12801947770Rst.gif" alt="" />
然后再点击杭州这个按钮,按钮列表就会改变,比如杭州变成西湖.如果我点击页面上箭头,结果是我所期望的.但是如果我点击工具条上的杭州这个按钮,出来的结果就是下图这样了
[img=http://hi.csdn.net/attachment/201007/27/0_1280194791GEgG.gif" alt="" />

,也就是margin-bottom:6px没了...使用IE开发工具可以看到


margin还是在的...可没显示出来...
刷新这个按钮列表的方法如下:

/*
        * 刷新工具条按钮,主要刷新历史查询记录
        * Parameter:
        *    lword {String} 改变后的主词
        */
        refreshHistoryBtn:function(lword){
            var obj = this;
            this.historyDiv.empty();
            if(this.container.historyArray.length<2){return;}
            $('<div class="historytag">历史查询</div>').appendTo(this.historyDiv);
            var leadword;
            for(var i=0;i<this.container.historyArray.length;i++){
                leadword = this.container.historyArray[i];
                if(leadword == lword) continue;
                $('<div class="btn historyword" title="查询该词的相关词情况"></div>').text(leadword).unbind().bind('click',{leadword:leadword}, function(e){
                    obj.container.confirmChangeLeadWord(e.data.leadword);
                    }).appendTo(obj.historyDiv);
            }
        },

页面上的箭头绑定事件代码:

this.linktag = this.element.find('>.linktag').bind('click', {obj:obj}, function(e){
                e.data.obj.container.confirmChangeLeadWord(e.data.obj.reword);
            }).attr('title', '查询该词的相关词');

调用的都是container.confirmChangeLeadWord(reword);为什么会出现不同的结果,而且只在IE8下出现,
初步怀疑可能和点击的DIV被empty()过有关.
很灵异的是这个情况并不是每次都出现的,我狂点工具条上的按钮N下,偶尔有那么一两次会出现正常结果...
求高人指点........................
补充一下,confirmChangeLeadWord方法里面会调用refreshHistoryBtn(leadword);这个方法来刷新工具条的按钮列表...

[hoojo]

怎么你这里的margin:0px;不是6px么，如果在其他浏览器中可以。应该是兼容问题

[adaikiss]

[Quote=引用 3 楼 ibm_hoojo 的回复:]

怎么你这里的margin:0px;不是6px么，如果在其他浏览器中可以。应该是兼容问题
[/Quote]
外层两个的margin确实是0px的,里面的按钮,也就是图上的杭州这个DIV的margin是6px.
我觉得这不像是兼容问题,
1.因为只有在IE8才出现,同样是IE,67没出现过这现象.而且调用相同的方法,只有点击工具条上的按钮才出现这现象,点击页面上的中箭头不会出现这个问题,这两个点击事件调用的方法完全一样!
2.并不是每次都会出现这个现象的,只是绝大多数情况是这样的,我一直点击,有时会出现正常的情况...
我每点击一次按钮实际做的事情是用jquery.empty()把.history这个DIV内容清空,然后再根据历史查询的数组创建一个个DIV层作为按钮并绑定单击事件.
因为两个地方点击出现不同结果,所以应该和调用的方法没关系,最容易让人想到的就是和点击的DIV被清空是否有关系...

[occam]

ie8确实有margin的问题。。。在隐藏元素的时候可能会在margin-bottom上出问题

建议在外层用padding补白 - -

[adaikiss]

[Quote=引用 5 楼 occam 的回复:]

ie8确实有margin的问题。。。在隐藏元素的时候可能会在margin-bottom上出问题

建议在外层用padding补白 - -
[/Quote]
谢谢, 我的层是类似于

<div class="tools">
    <div class="history">
        <div class="historyword">杭州</div>
        <div class="historyword">西湖</div>
    </div>
<div>

这样的结构的,然后出现的问题是杭州和西湖这两个层的margin:6px变没了...

[WebAdvocate]

lz是不是有浮动的元素啊，是不是发生margin折叠了？最好把样式给出来！！

[adaikiss]

[Quote=引用 1 楼 webadvocate 的回复:]

lz是不是有浮动的元素啊，是不是发生margin折叠了？最好把样式给出来！！
[/Quote]
谢谢回复,浮动倒没有,这整个工具条是绝对定位的...单个按钮的样式上面已经有了, 放历史查询按钮的DIV样式如下:

color:#333;
font:12px/1 Arial, SimSun;
font-size:100%;
margin:0px;
margin-top:5px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
text-align:left;
width:100%

整个工具条的样式如下:

border-bottom:#008800 1px solid;
border-left:#008800 1px solid;
border-right:#008800 1px solid;
border-top:#008800 1px solid;
color:#333;
display:block;
font:12px/1 Arial, SimSun;
font-size:100%;
left:475px;
margin:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
position:absolute;
text-align:left;
top:402px;
width:70px;

由于样式有的是导入的,有的是用JS设置的比较乱,所以直接贴出IE开发工具上的最终样式了...
这个页面我用sandbox上的所有浏览器都试过,只有IE8才会出现...而且出现的情况还有点灵异(上面已经提到)

[occam]

没辙啊...

把div加上内补白，然后a设置为display:block并应用原先div的样式试试看

[adaikiss]

悲剧,估计解决不了了....

[denken1015]

在CSS 中给那2个DIV 加上height:1%;试试