我正在使用常见的 CSS 解决方法来实现 IE6 中元素的固定位置
<style type="text/css">
.fixedPos {
position: fixed;
}
</style>
<!-- IE specific code: -->
<!--[if lte IE 7]>
<style type="text/css">
.fixedPos {
position: absolute;
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
</style>
<![endif]-->
我的问题是，在包含滚动框和多选框的页面上，当我开始滚动时，框呈现会完全困惑。
当我删除 <iframe>在固定元素所在的位置，滚动工作正常......(但是我有著名的 z-index 问题与 <select> 元素)。
有人知道这个的解决方案吗？
这是我用来重现错误的示例 HTML 页面。在此页面上滚动时，选择框呈现在 IE6 中变得困惑...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body class="">
<style type="text/css">
.fixedPos {
position: fixed;
}
</style>
<!-- IE specific code: -->
<!--[if lte IE 7]>
<style type="text/css">
.fixedPos {
position: absolute;
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
</style>
<![endif]-->
<iframe class="fixedPos" style="DISPLAY: block; width: 99%; height: 30px; z-index: 2" src="javascript:''" frameBorder="1" scrolling="no"></iframe>
<div width="99%" class="fixedPos" style="background-color: #FFFFFF; z-index: 3">
<table width="100%" style="margin-bottom: 5px; background-color: yellow" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class=""> 1. Dum di dum </td>
<td class=""> 2. Dum di dum </td>
<td class=""> 3. Dum di dum </td>
<td class=""> 4. Dum di dum </td>
<td class=""> 5. Dum di dum </td>
<td class=""> 6. Dum di dum </td>
</tr>
</table>
</div>
<div height="40px"></div>
<br />
<select id="" name="" size="14" multiple="multiple" style="width: 180px;" class="">
<option value="value" selected="selected"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
</select>
<br />
<select id="" name="" size="14" multiple="multiple" style="width: 180px;" class="">
<option value="value" selected="selected"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
<option value="value"> My Value </option>
</select>
</body>
</html>
最佳答案
这可能是 IE 表达式。几乎每一次用户交互都会对这些进行重新评估，并且相当耗费资源。也许尝试用 JS 定位它？
关于iframe - IE6 "position: fixed"解决方法在滚动时不适用于选择框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2355937/