comportement étrange défilement dans IE avec des cases à cocher dans un div scrollable

Question

J'ai un contrôle « multiselect » qui ressemble à ceci (désolé pour les longs noms d'identification, ils sont un peu parce que cette chose générées automatiquement tout est généré par une balise personnalisée):

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

Le CSS pour cette chose est:

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

Cela fonctionne très bien dans Firefox. Les cases défilent sans aucun problème dans la div scrollable. Mais quand je regardais cela dans IE8, il a l'air terrible.

Tout d'abord, les cases supplémentaires saignent en dehors de la principale div. En second lieu (ce qui est la chose vraiment étrange) quand utiliser la barre de défilement, le texte défile, mais les cases à cocher ne pas . Ils restent simplement en place pendant que le texte défile. J'ai essayé googler une solution mais a été incapable de trouver quoi que ce soit.

Merci!

UPDATE

Je trouve que si je retire la partie géniale dans le style de case à cocher:

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

Il fonctionne très bien. Mais je mets que pour vous assurer que mon et cases à cocher sont alignés correctement .

Oh oui aussi loin que la vue de la compatibilité concerne, cela est en cours d'exécution IE8 en mode de compatibilité.

En réponse aux commentaires sur les styles hérités, voici les styles que la case hérite:

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

Je ne vois rien qui pourrait potentiellement interférer ...

Answer 1

Il semble y avoir une étrange interaction entre les styles hérités et les styles que j'ai définis. Ce qui est clair de Jacob et les commentaires de Ray, car ils ont pu gifler ce code sur une page et avoir rendu bien dans IE sans aucun problème.

Je suis en mesure de le faire se comporter correctement en supprimant position:relative du style input.default-checkbox.

Je suppose que une sorte d'interaction bizarre fait les cases à cocher pensent qu'ils sont positionnés de manière statique ou tout à fait (ou quelque chose) en raison de laquelle ils ne défilent pas. Au moins I pense qui est la raison; quelqu'un peut être en mesure de fournir une meilleure raison et de faire la lumière sur ce point. En tout cas, en supprimant le position:relative, j'ai pu faire l'étrange arrêter le défilement-comportement. Merci de me aider comprendre cela!

Answer 2

Assurez-vous que vous n'avez pas position: fixed mis sur vos cases à cocher dans toutes les autres feuilles de style.

Answer 3

@rossisdead a suggéré, en ajoutant position: relative à l'élément de défilement permet de résoudre le problème. Je devais aussi ajouter position: relative au parent de l'élément de défilement.