Seltsam Scrollen Verhalten im IE mit Kontrollkästchen in einem scrollbaren div

Question

Ich habe eine „Multiselect“ -Steuerung, dass sieht wie folgt aus (sorry für den langen ID-Namen, sind sie irgendwie automatisch generiert, weil diese ganze Sache wird von einem benutzerdefinierten Tag erzeugt wird):

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

Die CSS für diese ganze Sache ist:

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

Das funktioniert wunderbar in Firefox. Die Kontrollkästchen blättern, ohne jedes Problem in der scrollbaren div. Aber wenn ich mir dies in IE8 sah, es sieht schrecklich aus.

Zum einen bluten die zusätzlichen Kontrollkästchen außerhalb des Haupt-div. Zweitens (und das ist das eigentlich Merkwürdige), wenn ich die Bildlaufleiste verwenden, um die Textrollen, aber die Kontrollkästchen nicht . Sie bleiben einfach an Ort und Stelle, während der Text scrollt. Ich habe versucht, eine Lösung googeln konnte aber nicht mit irgendetwas kommen.

Danke!

UPDATE

So fand ich heraus, dass, wenn ich den funky Teil in der Checkbox Styling entfernen:

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

Es funktioniert gut. Aber ich habe das in sicher href="https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers"> Etiketten und Kontrollkästchen meine aufgereiht sind.

Oh ja, so weit das Kompatibilitätsansicht betrifft, so wird dies IE8 unter Kompatibilitätsmodus ausgeführt wird.

Als Reaktion auf die Kommentare über geerbt Designs, hier sind Arten, dass die Checkbox erbt:

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

Ich sehe nichts, die möglicherweise stören könnte ...

Answer 1

Es scheint eine seltsame Wechselwirkung zwischen geerbten Stile und die Stile, die ich definiert haben. So viel ist klar von Jakobs und Rays Kommentaren, da sie in der Lage waren, diesen Code auf einer Seite zu schlagen und hat es ohne Probleme im IE machen.

Ich war in der Lage, damit es richtig verhalten, indem position:relative vom input.default-checkbox Stil zu entfernen.

Ich gehe davon aus, dass eine Art bizarre Interaktion macht die Kontrollkästchen denken, sie sind statisch oder absolut (oder etwas) positioniert, aufgrund derer sie blättern nicht. Wenigstens habe ich denken das ist der Grund; jemand in der Lage sein einen besseren Grund zu schaffen und Licht in diese. Auf jeden Fall durch die position:relative entfernen, konnte ich den seltsamen Scrolling-Verhalten Stopp machen. Vielen Dank für die mir helfen, dieses heraus!

Answer 2

Stellen Sie sicher, dass Sie nicht position: fixed Satz auf Ihrem Kontrollkästchen in irgendwelchen anderen Stylesheets haben.

Answer 3

@rossisdead Wie vorgeschlagen, das Hinzufügen position: relative zu den rollier Element löst das Problem. Ich habe auch position: relative auf den übergeordneten des Scrolling Elements hinzuzufügen.