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>
인터넷 익스플로러 8을 사용 중입니다. – Andrew
수 .. 정확히 네 문제는 뭐니? – Eggie
컨트롤 중 하나 위로 이동하면 오른쪽으로 이동합니다. 이것은 일어나서는 안됩니다. 이것은 수직 스크롤 바가있는 경우에만 발생합니다. 즉. 컨테이너 div에는 보이지 않는 컨트롤이 하나 이상 있습니다. 컨트롤 테두리는 마우스와 마우스에서 색상이 변경되지만 컨트롤은 고정 된 위치에 있어야합니다. – Andrew