1

我正在使用常见的 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>
4

1 回答 1

0

这可能是 IE 表达式。几乎每次用户交互都会对这些进行重新评估，并且相当耗费资源。也许尝试用JS定位它？

于 2011-05-05T21:35:14.710 回答