스크롤 가능한 div에서 확인란과 함께 IE의 이상한 스크롤 동작
https://stackoverflow.com/questions/2233438
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 다음과 같은 것처럼 보이는 "다중 선택"컨트롤이 있습니다 (긴 ID 이름에 대해 죄송합니다.이 모든 것이 사용자 정의 태그로 생성되기 때문에 자율적입니다) :
<div class="default-skin-outer" id="myMapSelect_multiSelectOuterDiv">
<div class="default-control" id="myMapSelect_multiSelectControlDiv">
<span class="default-icon-check-text" id="myMapSelect_multiSelectControlCheckWrapperSpan">
<span class="default-icon default-icon-check" id="myMapSelect_multiSelectControlCheckIconSpan"></span><span class="default-icon default-icon-text" id="myMapSelect_multiSelectControlCheckTextSpan">Check All</span>
</span>
<span class="default-icon-uncheck-text" id="myMapSelect_multiSelectControlUncheckWrapperSpan">
<span class="default-icon default-icon-uncheck" id="myMapSelect_multiSelectControlUncheckIconSpan"></span><span class="default-icon default-icon-text" id="myMapSelect_multiSelectControlUncheckTextSpan">Uncheck All</span>
</span>
</div>
<div class="default-skin-inner" id="myMapSelect_multiSelectInnerDiv">
<ul class="default-multiselect">
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="0" class="default-checkbox" id="myMapSelect0" name="myMapSelect"> Zero
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="1" class="default-checkbox" id="myMapSelect1" name="myMapSelect"> One
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="2" class="default-checkbox" id="myMapSelect2" name="myMapSelect"> Two
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="3" class="default-checkbox" id="myMapSelect3" name="myMapSelect"> Three
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="4" class="default-checkbox" id="myMapSelect4" name="myMapSelect"> Four
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="5" class="default-checkbox" id="myMapSelect5" name="myMapSelect"> Five
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="6" class="default-checkbox" id="myMapSelect6" name="myMapSelect"> Six
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="7" class="default-checkbox" id="myMapSelect7" name="myMapSelect"> Seven
</label>
</li>
</ul>
</div>
</div>
이 모든 것에 대한 CSS는 다음과 같습니다.
div.default-skin-outer {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 300px;
height: auto;
padding: 2px;
background-color: #f0f0f0;
border: 1px solid #999999;
}
div.default-skin-inner {
overflow: auto;
width: 300px;
height: 100px;
}
div.default-control {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: auto;
border: 1px solid #555555;
background-color: #999999;
color: #f0f0f0;
vertical-align: middle;
padding: 2px;
margin-bottom: 2px;
font-weight: bold;
overflow: hidden;
}
ul.default-multiselect {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
ul.default-with-padding {
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
li.default-multiselect {
list-style-type: none;
}
label.default-label {
display: block;
padding: 2px;
}
input.default-checkbox {
width: 13px;
height: 13px;
padding: 0;
margin: 0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
span.default-icon {
background-image: url("/resources/authoring/jqueryui/custom-theme/images/ui-icons_ffffff_256x240.png");
display: inline-block;
height: 16px;
width: 16px;
overflow: hidden;
}
span.default-icon-text {
width: auto;
background: none;
}
span.default-icon-text:hover {
text-decoration: underline;
cursor: pointer;
}
span.default-icon-check-text {
float: left;
}
span.default-icon-uncheck-text {
float: right;
}
span.default-icon-check {
background-position: -64px -144px;
}
span.default-icon-uncheck {
background-position: -96px -128px;
}
이것은 Firefox에서 아름답게 작동합니다. Shollable Div에서 아무런 문제없이 확인란이 스크롤합니다. 그러나 IE8에서 이것을 보았을 때, 그것은 끔찍해 보입니다.
첫째, 추가 확인란은 메인 디브 외부에서 출혈합니다. 둘째, 스크롤 막대, 텍스트 스크롤을 사용할 때 (정말 이상한 것입니다) 그러나 확인란은 그렇지 않습니다. 텍스트가 스크롤하는 동안 단순히 제자리에 머물러 있습니다. 솔루션을 위해 인터넷 검색을 시도했지만 아무것도 생각해 낼 수 없었습니다.
감사!
업데이트
그래서 나는 체크 박스 스타일에서 펑키 한 부분을 제거하면 다음을 알았습니다.
vertical-align:bottom;
position:relative;
top: -1px;
*overflow: hidden;
잘 작동합니다. 그러나 나는 그것을 확신하기 위해 그것을 넣었다 레이블과 확인란이 제대로 정렬됩니다.
오, 호환성보기에 관한 한, 이것은 IE8이 호환 모드에서 실행되고 있습니다.
상속 스타일에 대한 의견에 응답하여 Checkbox가 상속하는 스타일은 다음과 같습니다.
input {
border:1px solid #CFCFCF;
color:#000000;
font-family:Arial,Verdana,Sans-Serif;
font-size:12px;
padding-left:4px;
}
li.default-multiselect {
list-style-type:none;
}
ul.default-with-padding {
white-space:nowrap;
}
table {
empty-cells:show;
}
html, body {
line-height:16px;
}
잠재적으로 방해 할 수있는 것은 없습니다 ...
해결책
상속 스타일과 내가 정의한 스타일 사이에는 이상한 상호 작용이있는 것 같습니다. Jacob 's and Ray의 의견은이 코드를 페이지로 옮길 수 있었고 문제없이 IE에서 정상적으로 렌더링 할 수 있었기 때문에 분명합니다.
나는 제거하여 올바르게 행동하게 할 수 있었다. position:relative ~로부터 input.default-checkbox 스타일.
나는 어떤 종류의 기괴한 상호 작용으로 인해 체크 박스가 스크롤하지 않는 정적으로 또는 절대적으로 (또는 무언가) 위치에 있다고 생각한다고 가정합니다. 적어도 나는 생각한다 그게 이유야; 누군가가 더 나은 이유를 제공하고 이것에 대해 밝힐 수 있습니다. 어쨌든, 제거함으로써 position:relative, 나는 이상한 스크롤-행동 중지를 만들 수있었습니다. 이것을 알아 내도록 도와 주셔서 감사합니다!
다른 팁
가지고 있지 않은지 확인하십시오 position: fixed 다른 스타일 시트의 확인란을 설정하십시오.
@RossisDead가 제안한 것처럼 추가합니다 position: relative 스크롤 요소에 문제가 해결됩니다. 나는 또한 추가해야했다 position: relative 스크롤 요소의 부모에게.
