comportamiento extraño desplazamiento en IE con casillas de verificación en un div desplazable

Question

Tengo un control de "selección múltiple" que tiene este aspecto (lo siento por los nombres de ID largos, que están generados automáticamente un poco porque todo esto está siendo generado por una 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>

El CSS para que todo esto es:

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

Esto funciona muy bien en Firefox. Las casillas de verificación desplazarse sin ningún problema en el div desplazable. Pero cuando vi esto en IE8, se ve terrible.

En primer lugar, las casillas de verificación adicionales sangran fuera del div principal. En segundo lugar (y esto es lo realmente extraño) cuando se utiliza la barra de desplazamiento, el texto se desplaza, pero no lo hacen las casillas de verificación . Ellos simplemente permanecer en el lugar, mientras que el texto se desplaza. He intentado googlear para una solución, pero no pudo llegar a nada.

Gracias!

Actualizar

Así descubrí que si me quito la parte moderno en el estilo casilla de verificación:

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

Se trabaja muy bien. Pero puse que para asegurarse de que mi están alineados correctamente .

Oh, sí en lo que respecta a la vista de compatibilidad, este se ejecuta en IE8 modo de compatibilidad.

En respuesta a los comentarios acerca de estilos heredados, aquí hay estilos que hereda la casilla de verificación:

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

No veo nada que potencialmente podrían interferir ...

Answer 1

Parece que hay alguna extraña interacción entre los estilos heredados y los estilos que he definido. Eso está claro a partir de Jacob y los comentarios de Ray, ya que fueron capaces de dar una palmada a este código en una página y hacer que rinden bien en IE sin ningún problema.

yo era capaz de hacer que se comporte adecuadamente mediante la eliminación de position:relative del estilo input.default-checkbox.

Estoy asumiendo que algún tipo de interacción extraño está haciendo las casillas de verificación piensan que están posicionados de forma estática o totalmente (o algo así), debido a que no se desplazan. Al menos I piensan esa es la razón; alguien puede ser capaz de proporcionar una mejor razón y arrojar luz sobre esto. En cualquier caso, mediante la eliminación de la position:relative, yo era capaz de hacer la parada de desplazamiento con un comportamiento extraño. Gracias por ayudarme a resolver esto!

Answer 2

Asegúrese de que usted no tiene position: fixed establecer en sus casillas de verificación en cualquier otro de estilo.

Answer 3

Como sugirió @rossisdead, añadiendo position: relative al elemento de desplazamiento resuelve el problema. También he tenido que añadir position: relative al padre del elemento de desplazamiento.