سلوك التمرير غريب في IE مع خانات الاختيار في DIV قابل للتمرير

Question

لدي عنصر تحكم "متعدد الاستخدامات" يشبه هذا (آسف لأسماء الهوية الطويلة، فهي كيندا للالتمائية لأن هذا الشيء كله يتم إنشاؤه بواسطة علامة مخصصة):

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

CSS لهذا الشيء كله هو:

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

هذا يعمل بشكل جميل في فايرفوكس. مربع الاختيار انتقل دون أي مشكلة في DIV قابل للتمرير. ولكن عندما نظرت إلى هذا في IE8، يبدو الأمر فظيعا.

أولا، ينزف خانات الاختيار الإضافية خارج Div الرئيسية. ثانيا (وهذا هو الشيء الغريب حقا) عندما أستخدم شريط التمرير، وتخفيض النص، لكن خانات الاختيار لا. وبعد يبقون ببساطة في مكانه أثناء تفريغ النص. حاولت googling للحصول على حل ولكن لم يتمكن من التوصل إلى أي شيء.

شكرا!

تحديث

لذلك اكتشفت أنه إذا قمت بإزالة جزء غير تقليدي في تصميم مربع الاختيار:

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

أنه يعمل بشكل جيد. لكنني وضعت ذلك للتأكد من تصطف العلامات وخانات الاختيار بشكل صحيح.

أوه نعم بقدر ما يتعلقت طريقة عرض التوافق، هذا IE8 يعمل بموجب وضع التوافق.

ردا على التعليقات حول الأساليب الموروثة، فيما يلي أنماط ترث مربع الاختيار:

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

لا أرى أي شيء يمكن أن تتداخل ...

Answer 1

يبدو أن هناك بعض التفاعل الغريب بين الأساليب الموروثة والأنماط التي حددتها. من الواضح الكثير من تعليقات Jacob's and Ray منذ أن تمكنوا من صفعة هذا الرمز على صفحة ولديهم غرامة في IE دون أي مشاكل.

كنت قادرا على تصرفها بشكل صحيح عن طريق الإزالة position:relative من input.default-checkbox نمط.

أفترض أن نوعا من التفاعل الغريب يجعل خانات الاختيار تعتقد أنهم في وضعهم بشكل ثابت أو تماما (أو شيء آخر) بسبب عدم التمرير. على الأقل أنا فكر في هذا هو السبب؛ قد يكون شخص ما قادرا على تقديم سبب أفضل وإلقاء الضوء على هذا. على أي حال، عن طريق إزالة position:relative, ، كنت قادرا على جعل توقف سلوك التمرير الغريب. شكرا لمساعدتي في معرفة هذا!

Answer 2

تأكد من عدم وجود position: fixed تعيين على خانات الاختيار الخاصة بك في أي أساليب أخرى.

Answer 3

كما اقترح rossisdead، مضيفا position: relative إلى عنصر التمرير يحل المشكلة. كان علي أيضا إضافة position: relative إلى أصل عنصر التمرير.