CSS 绝对滚动与相对滚动

Question

这个问题记录在这个 JSFiddle 中:

http://jsfiddle.net/sawaira/j62309fx/39/

稳定迭代(完成 90%)

    <div style="height:100%; width:300px;float:right;border: 2px solid #0094ff;border-radius:5px">
        <div style="height:100%; width:100%;">
            <table style="width:100%;">
                <tr>
                    <td colspan="4">
                        <div class="containerChart2">
                            <div class="headerChartControl">
                                <span>My Team(s):</span>
                            </div>
                            <div id="filterHolder1" class="listControl">
                                 <form id="formUserListObject">
                                     <input type="checkbox" name="userSelection" id="{{id}}" onchange="checkBoxSelected(id,false)" class="css-checkbox"/>
    <label for="{{id}}" class="css-label">
        {{userName}}
    </label>

</form>
                            </div>
                        </div>
                    </td>
                </tr>

                      <tr>
                    <td colspan="4">
                        <div class="containerChart2">
                            <div class="headerChartControl">
                                <span>Find Other Team(s):</span>
                            </div>

                            <div class="contentSearch">
                                <!-- This is the HTML element that will be used to render the KeyLines component -->
                                <form id="formSearch" class="formSearch">
                                    <input type="search" id="searchBox" />
                                </form>

                                <!--label id="headervalue2">Search Results:</label-->
                                <div id="filterHolder2" class="listControl"></div>
                            </div>
                        </div>
                    </td>
                </tr>


                    <td colspan="4">
                               <div class="headerChartControl">

                                       <input type="button" onclick="document.getElementById('loading-image').style.display ='block'" value="Show"/>

<input type="button" onclick="document.getElementById('loading-image').style.display ='none'" value="Hide"/>
                            </div>

                        </td>
                    </tr>
                </table>
            </div>
 </div>
</div>

#formUserListObject {
        font-size: x-small;
    }

    #tab0 {
        top: 50px;
    }

    #page {
        display: none;
    }

    #loading-image {
        position:absolute;
        top: 50%;     
        left:50%;            
        z-index:1;
        font-size: 20px;
        color: red;


    }

    .overallDiv {
        height: 100%;
        width: 100%;
        background-color: #ff6a00;
    }

    .myDiv {
        height: 100%;
        width: 100%;
        background-color: #b6ff00;
    }

    .formClass {
    }

    .listControl {
        padding-top: 5px;
        padding-right: 15px;
        padding-bottom: 5px;
        padding-left: 15px;
        border: 2px solid #0094ff;
        height: 100px;
        overflow-y: scroll;
    }

    .paddingControl {
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
    }

    .slider {
        padding-top: 5px;
        padding-right: 15px;
        padding-bottom: 5px;
        padding-left: 15px;
        background-color: #00ff90;
    }

    input[type=checkbox].css-checkbox {
        position:absolute;
        z-index: -1000;
        left: -1000px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        padding: 0;
        margin: -1px;
        border: 0;
    }

    input[type=checkbox].css-checkbox + label.css-label {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-family: Arial;
        font-size: 10px;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -15px;
    }

    label.css-label {
        background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_845137eccd6f9ac2355055adf283a248.png);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input[type=checkbox].css-checkbox + label.css-labelMinus {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 -15px;
        font-family: Arial;
        font-size: 10px;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-labelMinus {
        background-position: 0 -15px;
    }

    label.css-labelMinus {
        background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_845137eccd6f9ac2355055adf283a248.png);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .headerChartControl {
        background-color: #9ed1f6;
        cursor: pointer;
        font-family: Arial;
        font-size: 12px;
        font-weight: bold;
        width: 100%;
    }


    .contentSearch {
        width: 100%;
    }

    .listControl {
        border: 1px solid #0094ff;
        height: 100px;
        overflow-y: scroll;
    }

    .searchText {
        font-family: Arial;
        font-size: 10px;
    }

    .formSearch {

        width: 100%;
        display: inline-block;
        padding-bottom: 2px;
    }

    input[type="search"] {
        background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAIVBMVEW/v7+/v78AAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v79QUkolAAAAC3RSTlOLYAAJeoMjRhpOcbsbtd4AAABJSURBVHjaVc1JDsAgDATB9uAF8v8Hx0QcSN9KssZI5eClDj18PRsFlmlQDcfUGd6A3EgYP1xncQ+sa5qYOk9jRQt1Y0izhU5bL2o2AW3ZQKeJAAAAAElFTkSuQmCC) 10px 6px no-repeat;
        height: 20px;
        border: 1px solid #0094ff;
        width: 100%;
    }


input[type="search"] {
  -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
 -webkit-appearance: textfield;
}

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
    }
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: searchfield-decoration;
    }

1) 如果您单击最右侧的“复选框”，您会注意到 div 向左滚动。我知道这种情况正在发生，因为我的复选框样式中有“position:absolute”。

但是，如果我完全删除位置属性，那么在 IE 中 - 我会看到一个“.”在复选框的“+”号前面。

如果我将位置属性设置为:“相对”，我会在 IE 中获得所需的行为，但在 Chrome 中它仍然会滚动出来。

有人可以告诉我我该怎么办吗？

Answer 1

根据您的代码的外观，您似乎正在尝试隐藏复选框并使用它的标签。如果是这样的话，那么你就走了很长的路。

而不是:

input[type=checkbox].css-checkbox {
    position:absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
}

简单地使用:

input[type=checkbox].css-checkbox {
    display: none;
}

根本没有理由让该复选框可见。

我用这个方法的一个地方:http://codepen.io/jacksonrk/pen/myqLOE