Question

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

Answer 1

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

当滚动时，IE6“position：fixed”解决方法不适用于选择框

1 个答案: