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

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

internet-explorer css html

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 年前

Eggie 16 年前

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

matsolof 15 年前

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

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

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