comportamento de rolagem estranho no IE com caixas de seleção em uma div scrollable

Question

Eu tenho um controle "multiselect" que se parece com isso (pena dos nomes id longos, eles são meio gerada automaticamente porque essa coisa toda está sendo gerado por uma etiqueta personalizada):

<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>

O CSS para esta coisa toda é:

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;
}

Isso funciona muito bem no Firefox. As caixas de seleção rolar sem qualquer problema na div de rolagem. Mas quando eu olhei para isso no IE8, parece terrível.

Em primeiro lugar, as caixas extras sangrar fora da div principal. Em segundo lugar (e esta é a coisa realmente estranho) quando eu usar a barra de rolagem, os pergaminhos de texto, , mas as caixas não . Eles simplesmente permanecer no local enquanto os pergaminhos de texto. Eu tentei procurar por uma solução, mas não foi capaz de chegar a qualquer coisa.

Obrigado!

Atualizar

Então, eu descobri que se eu remover a parte vibrante no estilo caixa:

vertical-align:bottom; 
position:relative; 
top: -1px; 
*overflow: hidden; 

Ele funciona muito bem. Mas eu colocar isso em ter certeza que meu e caixas de seleção estão alinhados adequadamente .

Oh sim, tanto quanto a exibição de compatibilidade está em causa, isto é IE8 rodando no modo de compatibilidade.

Em resposta aos comentários sobre estilos herdados, aqui estão os estilos que os herda 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;
}

Eu não vejo nada que poderiam interferir ...

Answer 1

Parece haver alguma estranha interação entre estilos herdados e os estilos que tenho definidos. Isso é muito claro a partir de Jacob e comentários de Ray uma vez que eles foram capazes de bater este código em uma página e tê-lo tornar bem no IE, sem quaisquer problemas.

Eu era capaz de fazê-lo se comportar adequadamente, removendo position:relative do estilo input.default-checkbox.

Estou assumindo que algum tipo de interação bizarro é fazer as caixas acho que eles estão posicionados estaticamente ou absolutamente (ou algo assim), devido a que eles não rolagem. Pelo menos eu pensar essa é a razão; alguém pode ser capaz de fornecer uma razão melhor e lançar luz sobre este. De qualquer forma, removendo o position:relative, eu era capaz de fazer o estranho parar a rolagem-comportamento. Obrigado por me ajudar a descobrir isso!

Answer 2

Certifique-se de que você não tem conjunto position: fixed em suas caixas de seleção em qualquer outro estilo.

Answer 3

Como @rossisdead sugeriu, acrescentando position: relative aos resolve elemento de rolagem do problema. Eu também tive que adicionar position: relative para o pai do elemento de rolagem.