当前位置： 文江博客话题详情

IE6“位置：固定”滚动时，解决方法不适用于选择框

发布于 2024-08-23 04:03:48 字数 4002 浏览 6 评论 0原文

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

我的问题是，在包含滚动和多选框的页面上，当我开始滚动时，框渲染会完全混乱。

当我删除固定元素所在的 时，滚动工作正常......（但随后我遇到了著名的 z-index 问题><选择> 元素）。

有人知道这个问题的解决方案吗？

这是我用来重现错误的 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>
原文

I am using the common CSS-workaround to achieve a fixed position of an element in 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]-->

My problem is that on pages that include scrolling and multi-select boxes the box rendering gets totally messed up when I start scrolling.

When I remove the <iframe> where the fixed element is, the scrolling works fine... (but then I have the famous z-index problem with the <select> elements).

Does anybody know a solution for this?

Here is an example HTML page I use for reproducing the error. When scrolling on this page the select box rendering goes haywire in 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

我爱人 2024-08-30 04:03:48

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

It's likely the IE expression. Those are reevaluated with nearly every user interaction and are rather resource intensive. Maybe try positioning it with JS?

回复 原文
~没有更多了~

关于作者

治碍

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文