代码之家  ›  专栏  ›  技术社区  ›  Andrew

当容器div有溢出时,为什么我的div元素会移动:auto set

  •  1
  • Andrew  · 技术社区  · 16 年前

    下面是一个违规代码的例子。。。注意,这段代码在FireFox中可以正常工作。问题出在Internet Explorer中。

    function init() {
        $(".listOUT").bind("mouseenter", function(e) {
            $(this).toggleClass('listOUT', false);
            $(this).toggleClass('listIN', true);
          })
          .bind("mouseleave", function(e) {
            $(this).toggleClass('listIN', false);
            $(this).toggleClass('listOUT', true);
          });
    #container {
      border: 1px solid black;
    }
    .controlContainer {
      display: inline;
      position: absolute;
      height: 25px;
      border: none;
    }
    .listOUT {
      position: relative;
      width: 100%;
      cursor: pointer;
      margin: 0 0 0 0;
      height: 85%;
      border: solid 1px #7F9DB9;
      padding-right: 20px;
      /*
        	background:url('images/ddImage_out.gif') no-repeat right center;
        	*/
    }
    .listIN {
      position: relative;
      width: 100%;
      cursor: pointer;
      margin: 0 0 0 0;
      height: 85%;
      border: inset 1px #7F9DB9;
      padding-right: 20px;
      /*
            background:url('images/ddImage_in.gif') no-repeat right center;
            */
    }
    .listTEXT {
      text-transform: none;
      width: 100%;
      position: relative;
      font-size: 8pt;
      color: Black;
      font-family: Verdana;
      cursor: pointer;
      border: none;
      padding-left: 4px;
      padding-right: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      overflow: hidden;
    }
    </style> </head> <body onload="init();"> <form id="form1" runat="server"> <div style="width:600px; height:200px;"> <div id="container" style="overflow:auto;position:relative;width:100%; height:100%;"> <div id="control1Container" style="left:67%;top:105px;width:15%;" class=
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('jquery', '1.3.1');
    </script>
    
    
    <form id="form1" runat="server">
      <div style="width:600px; height:200px;">
        <div id="container" style="overflow:auto;position:relative;width:100%; height:100%;">
          <div id="control1Container" style="left:67%;top:105px;width:15%;" class="controlContainer">
            <div id="control1" class="listOUT">
              <input type="text" class="listTEXT" id="ddTextBox1" readonly="readonly" value="Digital" name="ddTextBox1" />
              <input type="hidden" value="1" id="selSelected1" name="selSelected1" />
            </div>
          </div>
          <div id="control3Container" style="left:50%;top:15px;width:36%;" class="controlContainer">
            <div id="control3" class="listOUT">I am a control</div>
          </div>
          <div id="control4Container" style="left:40%;top:145px;width:36%;" class="controlContainer">
            <div id="control4" class="listOUT">I am a control</div>
          </div>
          <div id="control2Container" style="left:47%;top:225px;width:36%;" class="controlContainer">
            <div id="control2" class="listOUT">I am a control</div>
          </div>
          <!-- more controls here -->
        </div>
      </div>
    </form>
    2 回复  |  直到 9 年前
        1
  •  0
  •   Eggie    16 年前

    你在用哪个版本的IE?firefox中的行为与IE7&IE6中的行为相同。

        2
  •  0
  •   matsolof    15 年前

    我想我明白你的意思了。当我在InternetExplorer8中打开你的网页并指向控件时,它们移到了左边。

    我对javascript几乎没有经验,也从未使用过jquery,但是如果您只想更改mouseenter和mouseleave上的边框颜色,我可能可以帮您解决这个问题。

    http://www.mkforlag.com/eng_contact/