ie6下select位置显示不正确

时间:2022-02-07 10:55:21
我只知道ie6下弹出层会被select遮挡,可是我没有用弹出层,用了一个jQuery的tab选项卡控件,结果select框位置显示不正确

正常效果
ie6下select位置显示不正确

ie6下效果
ie6下select位置显示不正确

ie6下多出来的这个select,是"插入"选项卡里的,当我选择插入选项卡时,就自动消失了(还原到原来的位置去了)。如果我不给它绑定数据源的话,就不会位置发生变化。
还有,奇怪的是,移动选项卡里也有同样的select,代码也相同,但是只有插入选项卡下的select位置会显示不正确。。

下面是html代码

<div id="divtabs" class="usual">
                  <ul style="font-size:10px">
                    <li><a href="#tab1" class="selected">查询</a></li>
                     <% if(Session["roledesc"].ToString() == "管理员"){ %>
                    <li><a href="#tab2">修改</a></li>
                    <li><a href="#tab3">插入</a></li>
                    <li><a href="#tab4">删除</a></li>
                    <li><a href="#tab5">移动</a></li>
                     <%} %>
                 </ul>
          <div id="tab1" class="tabmenu">
              <table id="treewhere">
                  <tr>
                      <td>模板类型</td>
                      <td>
                          <select id="seltreetype">
                              <option value="lg">炼钢成本表</option>
                              <option value="zg">轧钢成本表</option>
                          </select>
                      </td>
                  </tr>
              </table>              
          </div>
          <% if(Session["roledesc"].ToString() == "管理员"){ %>
           <div id="tab2" class="tabmenu">
               <table id="tbcostitemmodify">
                   <tr>
                       <td>成本项目</td>
                       <td><input type="text" id="txtselnodemodify" /></td>
                       <td>单位</td>
                       <td><input type="text" id="txtunitmodify" /></td>
                       <td><input type="button" id="btnmodify" value="修改" /></td>
                   </tr>
               </table>
               
           </div>
           <div id="tab3" class="tabmenu">
               <table id="tbcostitemadd">
                   <tr>
                       <td>父节点</td>
                       <td><select id="selnodeparent"><option value='0'>根节点</option></select></td>
                       <td>成本项目</td>
                       <td><input type="text" id="txtselnodeadd" /></td>
                       <td>单位</td>
                       <td><input type="text" id="txtunitadd" /></td>
                       <td><input type="button" id="btnadd" value="添加" /></td>
                   </tr>
               </table>
           </div>
           <div id="tab4" class="tabmenu">
                <table id="tbcostitemdelete">
                   <tr>
                       <td>成本项目</td>
                       <td><input type="text" id="txtselnodedelete" disabled="disabled" /></td>
                       <td>单位</td>
                       <td><input type="text" id="txtunitdelete" disabled="disabled"/></td>
                       <td><input type="button" id="btndelete" value="删除" /></td>
                   </tr>
               </table>
           </div>
          <div id="tab5" class="tabmenu">
              <table id="tbcostitemmove">
                  <tr>
                      <td>成本项目</td>
                      <td><input type="text" id="txtselnodemove" disabled="disabled" /></td>
                      <td>移动到父节点</td>
                      <td><select id="selnodemoveparent"><option value='0'>根节点</option></select></td>
                      <td><input type="button" id="btnmove" value="移动" /></td>
                  </tr>
              </table>
          </div>
          <%} %>
     </div>


下面是为select绑定数据源的js代码

 function getcostitem() {
            $.post("./handler/CostItemHandler.ashx", { "action": "query", "typeid": $("#seltreetype").val() }, function (data, status) {
                if (data != "") {
                    $("#selnodeparent").empty();
                    $("#selnodemoveparent").empty();

                    var costitems = data.split(";");
                    var selhtml = "<option value='0'>根节点</option>";
                    for (var i = 0; i < costitems.length; i++) {
                        var costitem = costitems[i].split(",");
                        selhtml += "<option value='" + costitem[0] + "'>" + costitem[1] + "</option>";
                    }
                   
                    $("#selnodemoveparent").html(selhtml);
                    $("#selnodeparent").html(selhtml);//selnodeparent
                }
            });
  }

7 个解决方案

#1


引用 楼主 yaotomo 的回复:
我只知道ie6下弹出层会被select遮挡,可是我没有用弹出层,用了一个jQuery的tab选项卡控件,


那你现在知道别的层也遮挡不住存在的 select 了?!

现在就记住这个常识吧。

#2


ie6做一个hack,让那个select隐藏起来。

#3


ie6的兼容性不是很好  换低版本试试

#4


你可以在tab的点击事件里面加上这个,判断下tab的index,如果不是这个就把这个select影藏掉,不是,就显示出来
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {影藏}

#5


引用 1 楼 sp1234 的回复:
那你现在知道别的层也遮挡不住存在的 select 了?!

现在就记住这个常识吧。


为什么我不绑定数据源,位置就不会移动?一设置数据源位置就乱了?

#6


引用 2 楼 caozhy 的回复:
ie6做一个hack,让那个select隐藏起来。


引用 4 楼 fcylovehbb 的回复:
你可以在tab的点击事件里面加上这个,判断下tab的index,如果不是这个就把这个select影藏掉,不是,就显示出来
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {影藏}



我刚才用代码

            if ($.browser.msie && $.browser.version == "6.0" && !$.support.style) {
                $("#selnodeparent").hide();
                $("#selnodemoveparent").hide();
            }


结果ie6下这两个select 是被隐藏了,可是位置乱窜的那个select还是在。。。我也搞不清楚这是哪个select了。。。

#7


乱串什么情况啊,截个图看看

#1


引用 楼主 yaotomo 的回复:
我只知道ie6下弹出层会被select遮挡,可是我没有用弹出层,用了一个jQuery的tab选项卡控件,


那你现在知道别的层也遮挡不住存在的 select 了?!

现在就记住这个常识吧。

#2


ie6做一个hack,让那个select隐藏起来。

#3


ie6的兼容性不是很好  换低版本试试

#4


你可以在tab的点击事件里面加上这个,判断下tab的index,如果不是这个就把这个select影藏掉,不是,就显示出来
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {影藏}

#5


引用 1 楼 sp1234 的回复:
那你现在知道别的层也遮挡不住存在的 select 了?!

现在就记住这个常识吧。


为什么我不绑定数据源,位置就不会移动?一设置数据源位置就乱了?

#6


引用 2 楼 caozhy 的回复:
ie6做一个hack,让那个select隐藏起来。


引用 4 楼 fcylovehbb 的回复:
你可以在tab的点击事件里面加上这个,判断下tab的index,如果不是这个就把这个select影藏掉,不是,就显示出来
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {影藏}



我刚才用代码

            if ($.browser.msie && $.browser.version == "6.0" && !$.support.style) {
                $("#selnodeparent").hide();
                $("#selnodemoveparent").hide();
            }


结果ie6下这两个select 是被隐藏了,可是位置乱窜的那个select还是在。。。我也搞不清楚这是哪个select了。。。

#7


乱串什么情况啊,截个图看看