Странное поведение прокрутки в IE с флажками в прокручиваемом div
https://stackoverflow.com/questions/2233438
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть элемент управления "multiselect", который выглядит следующим образом (извините за длинные имена идентификаторов, они как бы автоматически генерируются, потому что все это генерируется пользовательским тегом):
<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.Флажки прокручиваются без каких-либо проблем в прокручиваемом div.Но когда я посмотрел на это в IE8, это выглядит ужасно.
Во-первых, дополнительные флажки выводятся за пределы основного div.Во-вторых (и это действительно странная вещь), когда я использую полосу прокрутки, текст прокручивается, но флажки этого не делают.Они просто остаются на месте, пока прокручивается текст.Я попытался поискать решение в Google, но ничего не смог придумать.
Спасибо!
Обновить
Итак, я обнаружил, что если я удалю обалденную часть в стиле checkbox:
vertical-align:bottom;
position:relative;
top: -1px;
*overflow: hidden;
Это работает нормально.Но я вставил это, чтобы убедиться, что мой метки и флажки выстроены должным образом.
О да, что касается представления совместимости, это IE8, работающий в режиме совместимости.
В ответ на комментарии о унаследованных стилях, вот стили, которые наследует флажок:
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;
}
Я не вижу ничего, что могло бы потенциально помешать...
Решение
Кажется, существует какое-то странное взаимодействие между унаследованными стилями и стилями, которые я определил.Это ясно из комментариев Джейкоба и Рэя, поскольку они смогли поместить этот код на страницу и заставить его нормально отображаться в IE без каких-либо проблем.
Я смог заставить его вести себя должным образом, удалив position:relative из input.default-checkbox Стиль.
Я предполагаю, что какое-то странное взаимодействие заставляет флажки думать, что они расположены статически или абсолютно (или что-то в этом роде), из-за чего они не прокручиваются.По крайней мере , я подумай вот в чем причина;возможно, кто-то сможет привести более вескую причину и пролить свет на это.В любом случае, удалив position:relative, Я смог остановить странное поведение прокрутки.Спасибо, что помогли мне разобраться в этом!
Другие советы
Убедитесь, что у вас нет position: fixed установите свои флажки в любых других таблицах стилей.
Как предложил @rossisdead, добавив position: relative к элементу прокрутки, который решает проблему.Я также должен был добавить position: relative к родительскому элементу прокрутки.
