comportamento di scorrimento Strano in IE con le caselle di controllo in un div scorrevole

Question

Ho un controllo "selezione multipla" che assomiglia a questo (scusate per i nomi lunghi id, sono un po generati automaticamente, perché tutta questa cosa viene generato da un tag personalizzato):

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

Il CSS per tutta questa faccenda è:

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

Questo funziona splendidamente in Firefox. Le caselle di controllo scorrere senza alcun problema nel div scorrevole. Ma quando ho guardato questo in IE8, sembra terribile.

In primo luogo, le caselle di controllo in più sanguinano al di fuori del div principale. In secondo luogo (e questa è la cosa davvero strana) quando uso la barra di scorrimento, il testo scorre, , ma le caselle di controllo non lo fanno . Essi semplicemente rimanere sul posto mentre il testo scorre. Ho provato googling per una soluzione, ma non riuscivo a venire con qualsiasi cosa.

Grazie!

Aggiorna

Così ho scoperto che se mi tolgo la parte funky nello styling casella di controllo:

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

Funziona bene. Ma ho messo in per assicurarsi che il mio sono allineati correttamente .

Oh sì per quanto riguarda la vista di compatibilità è interessato, questo è IE8 in esecuzione in modalità di compatibilità.

In risposta ai commenti su stili ereditati, qui ci sono stili che la casella di controllo eredita:

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

Non vedo nulla che possa potenzialmente interferire ...

Answer 1

Sembra che ci sia qualche strana interazione tra gli stili ereditati e gli stili ho definito. Questo è chiaro da Giacobbe e commenti di Ray dato che erano in grado di schiaffo questo codice su una pagina e farlo rendere bene in IE senza problemi.

Sono riuscito a rendere comportarsi correttamente rimuovendo position:relative dallo stile input.default-checkbox.

Sto supponendo che una sorta di interazione bizzarro sta facendo le caselle pensano di essere posizionati in modo statico o assoluto (o qualcosa) a causa della quale non scorrere. Almeno I pensare questo è il motivo; qualcuno potrebbe essere in grado di fornire una ragione migliore e fare luce su questo. In ogni caso, rimuovendo il position:relative, sono stato in grado di fare lo strano arresto scorrimento-comportamento. Grazie per avermi aiutato a capire questo fuori!

Answer 2

Assicurarsi che non si dispone di position: fixed impostato sulle vostre caselle di controllo in tutti gli altri fogli di stile.

Answer 3

Come @rossisdead suggerito, aggiungendo position: relative all'elemento scorrimento risolve il problema. Ho dovuto anche aggiungere position: relative al genitore dell'elemento di scorrimento.