IE中的奇怪滚动行为与可滚动div中的复选框 [英] Strange scrolling behavior in IE with checkboxes in a scrollable div
问题描述
我有一个multiselect控件，看起来像这样（很抱歉，长的id名称，他们有点自动生成，因为这整个事情是由自定义标记生成）：
< div class =default-skin-outerid =myMapSelect_multiSelectOuterDiv>
< div class =default-controlid =myMapSelect_multiSelectControlDiv>
< span class =default-icon-check-textid =myMapSelect_multiSelectControlCheckWrapperSpan>
< span class =default-icon default-icon-textid =myMapSelect_multiSelectControlCheckTextSpan< span class =default-icon default-icon-textid =myMapSelect_multiSelectControlCheckTextSpan >全部检查< / span>
< / span>
< span class =default-icon-uncheck-textid =myMapSelect_multiSelectControlUncheckWrapperSpan>
< span class =default-icon default-icon-uncheckid =myMapSelect_multiSelectControlUncheckIconSpan>< / span>< span class =default-icon default-icon-textid =myMapSelect_multiSelectControlUncheckTextSpan >取消选中全部< / span>
< / span>
< / div>
< div class =default-skin-innerid =myMapSelect_multiSelectInnerDiv>
< ul class =default-multiselect>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =0class =default-checkboxid =myMapSelect0name =myMapSelect>零
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =1class =default-checkboxid =myMapSelect1name =myMapSelect>一个
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =2class =default-checkboxid =myMapSelect2name =myMapSelect>两个
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =3class =default-checkboxid =myMapSelect3name =myMapSelect>三个
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =4class =default-checkboxid =myMapSelect4name =myMapSelect> Four
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =5class =default-checkboxid =myMapSelect5name =myMapSelect>五
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =6class =default-checkboxid =myMapSelect6name =myMapSelect>六
< / label>
< / li>
< li class =default-multiselect>
< label class =default-label>
< input type =checkboxvalue =7class =default-checkboxid =myMapSelect7name =myMapSelect>七
< / 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外流血。其次（这是真的很奇怪的事情），当我使用滚动条，文本滚动，但是复选框不。他们只是在文本滚动时保持在原地。
谢谢！
UPDATE
所以我发现如果我删除复选框样式中的有趣的部分：
vertical-align：bottom;
position：relative;
顶部：-1px;
* overflow：hidden;
它工作正常。但我把它放在，以确保我的标签和复选框正确排队。
是的，就兼容性视图而言，这是IE8在兼容模式下运行。
为了响应关于继承样式的评论，下面是复选框继承的样式：
{
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;
}
表{
empty-cells：show;
}
html，body {
line-height：16px;
}
我没有看到任何可能会干扰...
在继承的样式和我定义的样式之间似乎有一些奇怪的交互。这很清楚从Jacob和Ray的意见，因为他们能够把这个代码放在一个页面，并在IE没有任何问题，它呈现正常。
我能够通过从 input.default-checkbox 样式中删除 position：relative
$ b
我假设某种奇怪的互动是使复选框认为他们是静态或绝对（或某事），由于他们不滚动定位。至少我认为这是原因;有人可能能够提供更好的理由，并阐明这一点。无论如何，通过删除 position：relative ，我能够使奇怪的滚动行为停止。感谢您帮助我找到这个！
I have a "multiselect" control that looks like this (sorry for the long id names, they are kinda autogenerated because this whole thing is being generated by a custom tag):
<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>
The CSS for this whole thing is:
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;
}
This works beautifully in Firefox. The checkboxes scroll without any problem in the scrollable div. But when I looked at this in IE8, it looks terrible.
Firstly, the extra checkboxes bleed outside the main div. Secondly (and this is the really strange thing) when I use the scroll bar, the text scrolls, but the checkboxes do not. They simply stay in place while the text scrolls. I tried googling for a solution but was unable to come up with anything.
Thanks!
UPDATE
So I found out that if I remove the funky part in the checkbox styling:
vertical-align:bottom;
position:relative;
top: -1px;
*overflow: hidden;
It works fine. But I put that in to make sure my labels and checkboxes are lined up properly.
Oh yes as far as the compatibility view is concerned, this is IE8 running under compatibility mode.
In response to the comments about inherited styles, here are styles that the checkbox inherits:
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;
}
I don't see anything that could potentially interfere...
There seems to be some strange interaction between inherited styles and the styles I have defined. That much is clear from Jacob's and Ray's comments since they were able to slap this code onto a page and have it render fine in IE without any issues.
I was able to make it behave properly by removing position:relative from the input.default-checkbox style.
I'm assuming that some sort of bizarre interaction is making the checkboxes think they are positioned statically or absolutely (or something) due to which they don't scroll. At least I think that's the reason; someone may be able to provide a better reason and shed light on this. At any rate, by removing the position:relative, I was able to make the strange scrolling-behavior stop. Thanks for helping me figure this out!
这篇关于IE中的奇怪滚动行为与可滚动div中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
