IE中奇怪的滚动行为与可滚动div中的复选框答案

【问题标题】：Strange scrolling behavior in IE with checkboxes in a scrollable divIE中奇怪的滚动行为与可滚动div中的复选框
【发布时间】：2011-01-15 01:29:02
【问题描述】：

我有一个看起来像这样的“多选”控件（对不起，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;

它工作正常。但我把它放进去是为了确保我的labels and checkboxes are lined up properly。

哦，是的，就兼容性视图而言，这是在兼容模式下运行的IE8。

针对cmets关于继承样式的问题，这里是checkbox继承的样式：

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

我没有看到任何可能干扰的东西...

【问题讨论】：

不会发生在我身上。 IE 8 是否在兼容模式下运行？默认情况下，当您查看 Intranet 站点时，它会自动执行此操作。
我也试过了，在IE8下看起来不错。在兼容模式下也很好。
对我来说似乎也不会在兼容模式下发生。也许问题在于您发布的问题之外的 CSS 或 HTML。
所以我发现如果我删除复选框 (vertical-align:bottom; position:relative; top: -1px; *overflow: hidden;) 中的时髦部分，它可以正常工作。但我把它放进去是为了确保我的标签和复选框正确排列......所以看起来它是一个或另一个。我要更新这个问题。 @Jacob @Ray 真的吗？这很奇怪......嗯，我想这可能与其他干扰它的 CSS 有关？我会在没有任何其他样式的情况下尝试它。
请务必发布如何让标签和复选框正确对齐。这总是超级烦人的。

标签： css internet-explorer internet-explorer-8 scroll vertical-scrolling

【解决方案1】：

继承的样式和我定义的样式之间似乎有一些奇怪的交互。 Jacob 和 Ray 的 cmets 清楚地说明了这一点，因为他们能够将此代码粘贴到页面上并让它在 IE 中正常渲染而不会出现任何问题。

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

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

【讨论】：

很高兴听到这个消息。这绝对是一个奇怪的。
另一个解决方法是添加 position:relative 到滚动 div 的样式。
感谢您发布此修复程序。我在旧 IE 上遇到了完全相同的问题，它也归结为复选框上的 position:relative 样式。我最终按照 rossisdead 的建议将position:relative 应用于滚动元素。
@ElliotB。很高兴为您提供帮助！
你太棒了！我生命中最大的问题现在解决了:) 谢谢！！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，但它似乎没有从任何地方继承。