1
以下是有问题的代码的示例...注意，此代码在FireFox中按预期工作。问题出在Internet Explorer中。为什么我的div元素在容器div发生溢出时发生移位：自动设置
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;
/*
\t background:url('images/ddImage_out.gif') no-repeat right center;
\t */
}
.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>
我正在使用Internet Explorer 8 – Andrew 2010-01-22 08:42:40
Soo ..你的问题究竟是什么，应该如何看待？ – Eggie 2010-01-22 11:04:53
当我移动到其中一个控件时，它将转向右侧。这不应该发生。这只有在存在垂直滚动条时才会发生。即。在容器div中至少有一个控件不在视图中。控制边框应该在mouseenter和mouseleave上改变颜色，但控件应保持在固定位置。 – Andrew 2010-01-22 12:24:12