IE 中奇怪的滚动行为，带有可滚动 div 中的复选框

Question

我有一个看起来像这样的“多选”控件（抱歉，ID 名称很长，它们有点自动生成，因为这整个事情是由自定义标记生成的）：

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

这在 Firefox 中工作得很好。复选框在可滚动 div 中滚动没有任何问题。但当我在 IE8 中查看时，它看起来很糟糕。

首先，额外的复选框位于主 div 之外。其次（这是非常奇怪的事情）当我使用滚动条时，文本会滚动，但复选框不会滚动。当文本滚动时，它们只是停留在原处。我尝试用谷歌搜索解决方案，但无法想出任何解决方案。

谢谢！

更新

所以我发现，如果我删除复选框样式中的时髦部分：

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 和 Ray 的评论中可以清楚地看出这一点，因为他们能够将此代码粘贴到页面上，并使其在 IE 中正常渲染，没有任何问题。

通过从 input.default-checkbox 样式中删除 position:relative ，我能够使其正常运行。

我假设某种奇怪的交互使复选框认为它们是静态或绝对（或其他）定位的，因此它们不会滚动。至少我认为就是这个原因；有人也许能够提供更好的理由并阐明这一点。无论如何，通过删除 position:relative，我能够停止奇怪的滚动行为。谢谢你帮我解决这个问题！

Answer 2

正如 @rossisdead 所建议的，向滚动元素添加 position:relative 可以解决问题。我还必须将 position:relative 添加到滚动元素的父级。

Answer 3

确保您没有在任何其他样式表中的复选框上设置 position:fixed。