Question

以下是违规代码的示例...注意，此代码在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>

Answer 1

您使用的是哪个版本的IE？ firefox中的行为与IE7和IE6中的行为相同。

Answer 2

我想我明白你的意思了。当我在Internet Explorer 8中打开您的网页并指向控件时，它们向左移动。

我对javascript的经验很少，并且从未使用过jquery，但如果您只想改变mouseenter和mouseleave上的边框颜色，我可以帮助您。

转到http://www.mkforlag.com/eng_contact/，然后单击浅蓝色字段以查看边框变为棕色，背景变为黄色。它是否与您想要达到的效果相似？

当容器div溢出时，为什么我的div元素会移动：自动设置

2 个答案: