IE7 中绝对定位元素错误

发布于 2024-11-26 15:13:52 字数 5236 浏览 0 评论 0原文

我遇到一个问题,绝对定位的 div 隐藏在浮动 div 后面。我已经在堆栈上做了很多阅读来寻找这个问题的答案,但我尝试过的任何方法都不起作用,所以我将把源代码放在这里。我不知道我错过了什么。

如果您单击“浏览”文本,我会让 jquery 打开一些选项的菜单。这些选项位于绝对定位的 div 中,在 ie7 模式下您将在其下方的 div 内容后面看到它们。我在 IE7 模式 + IE7 标准下使用 IE9 来获得此结果。

<!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" lang="en-us">
    <head>
        <title>IE7 Absolutely Positioned Element Issue</title>
        <style type="text/css">
            * { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; }
            div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
            div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative; }
            div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
            div.browseMenu ul { list-style-type: none; }
            div.browseMenu li { background-color: transparent; padding: 3px 7px; margin: 0px; white-space: nowrap; }
            div.browseMenu li:hover { text-decoration: underline; }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="section" style="position: realtive;">
            <div style="float: left; padding-left: 100px;">
                Left Content
            </div>
            <div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
                Browse
                <div class="browseMenu">
                    <ul>
                        <a href="http://www.google.com/"><li>Google</li></a>
                        <a href="http://www.yahoo.com/"><li>Yahoo</li></a>
                        <a href="http://www.bing.com/"><li>Bing</li></a>
                    </ul>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="section">
            <div style="position: relative;">
                <div style="float: left; width: 40%; padding: 5%;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
                    tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
                    scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
                    faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
                    Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
                    et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
                    libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
                    sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
                    Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
                    augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
                </div>
                <div style="float: left; Peach; width: 40%; padding: 5%;">
                    Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
                    mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
                    placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
                    Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
                    sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
                    vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
                    dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
                    In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
                    odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
                    justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
                    sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <script type="text/javascript">
            // Toggle the browse menu.
            $('.toggleBrowseMenu').click(function ()
            {
                $(this).find('.browseMenu').toggle();
            });

            // Hide the browse menu when the mouse leaves the tag.
            $('.browseMenu').mouseleave(function ()
            {
                $(this).hide();
            });
        </script>
    </body>
</html>

I'm having an issue where an absolutely positioned div is hiding behind a floating div. I've done a lot of reading on stack for the answer to this and nothing I've tried works, so I'm going to drop the source code here. I don't know what I'm missing.

If you click the "browse" text, I have jquery open a menu for some options. The options are in the absolutely positioned div and you'll see them behind the div content below it in ie7 mode. I'm using IE9 in IE7 mode + IE7 standards to get this result.

<!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" lang="en-us">
    <head>
        <title>IE7 Absolutely Positioned Element Issue</title>
        <style type="text/css">
            * { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; }
            div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
            div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative; }
            div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
            div.browseMenu ul { list-style-type: none; }
            div.browseMenu li { background-color: transparent; padding: 3px 7px; margin: 0px; white-space: nowrap; }
            div.browseMenu li:hover { text-decoration: underline; }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="section" style="position: realtive;">
            <div style="float: left; padding-left: 100px;">
                Left Content
            </div>
            <div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
                Browse
                <div class="browseMenu">
                    <ul>
                        <a href="http://www.google.com/"><li>Google</li></a>
                        <a href="http://www.yahoo.com/"><li>Yahoo</li></a>
                        <a href="http://www.bing.com/"><li>Bing</li></a>
                    </ul>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="section">
            <div style="position: relative;">
                <div style="float: left; width: 40%; padding: 5%;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
                    tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
                    scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
                    faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
                    Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
                    et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
                    libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
                    sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
                    Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
                    augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
                </div>
                <div style="float: left; Peach; width: 40%; padding: 5%;">
                    Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
                    mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
                    placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
                    Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
                    sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
                    vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
                    dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
                    In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
                    odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
                    justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
                    sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <script type="text/javascript">
            // Toggle the browse menu.
            $('.toggleBrowseMenu').click(function ()
            {
                $(this).find('.browseMenu').toggle();
            });

            // Hide the browse menu when the mouse leaves the tag.
            $('.browseMenu').mouseleave(function ()
            {
                $(this).hide();
            });
        </script>
    </body>
</html>

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

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

发布评论

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

评论(2

夢归不見 2024-12-03 15:13:52

好吧!这是我们得到的。

<!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" lang="en-us">
<head>
    <title>IE7 Absolutely Positioned Element Issue</title>
    <style type="text/css">
        * { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; z-index:1;}
        /* z-index to 1 for everything*/
        div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
        div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative;}
        div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
        /*set z-index to 10 here! */
        div.browseMenu ul { list-style-type: none; }
        div.browseMenu li { background-color: green; padding: 3px 7px; margin: 0px; white-space: nowrap; }
        div.browseMenu li:hover { text-decoration: underline; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="section"> <!-- you didn't this to be relatively positioned -->
        <div style="float: left; padding-left: 100px;">
            Left Content
        </div>
        <div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
            Browse
            <div class="browseMenu">
                <ul>
                    <a href="http://www.google.com/"><li>Google</li></a>
                    <a href="http://www.yahoo.com/"><li>Yahoo</li></a>
                    <a href="http://www.bing.com/"><li>Bing</li></a>
                </ul>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="section"><!-- removed wrapping div with relative positioning here-->
        <div style="float: left; width: 40%; padding: 5%;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
            tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
            scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
            faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
            Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
            et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
            libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
            sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
            Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
            augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
        </div>
        <div style="background-color:red; float: left; width: 40%; padding: 5%;">
            Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
            mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
            placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
            Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
            sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
            vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
            dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
            In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
            odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
            justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
            sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        </div>
        <div style="clear: both;"></div>
    </div>
    <script type="text/javascript">
        // Toggle the browse menu.
        $('.toggleBrowseMenu').click(function ()
        {
            $('.browseMenu').toggle();
        });

        // Hide the browse menu when the mouse leaves the tag.
        $('.browseMenu').mouseleave(function ()
        {
            $(this).hide();
        });
    </script>
</body>
</html>

现在,不要引用我的这个解决方案,因为我只使用 IE7 测试器,而不是实际的 IE7,但它通常适合我。目前,我将右侧部分的背景颜色更改为红色。你可以解决这个问题。

问题是,你有一个额外的 div 包装了包含内容的节类,并使用“position:relative”进行样式设置。该 div 未命名,因此无法通过样式表引用,因此我将其删除。另外,在第一部分 div 类中,相对于我如何完全删除它,您拼写错误,因为您不需要它。我最初将每个项目的 z-index 设置为 1,并将 .browsemenu 类上的 z-index 提高到 10。
另外,“Fusce adipi....”开始的段落,在样式引用中随机包含单词 peach 的 div 换行。

我对所有编辑都发表了评论。
祝你好运,我希望这会有所帮助。

Alright! Here is what we got.

<!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" lang="en-us">
<head>
    <title>IE7 Absolutely Positioned Element Issue</title>
    <style type="text/css">
        * { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; z-index:1;}
        /* z-index to 1 for everything*/
        div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
        div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative;}
        div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
        /*set z-index to 10 here! */
        div.browseMenu ul { list-style-type: none; }
        div.browseMenu li { background-color: green; padding: 3px 7px; margin: 0px; white-space: nowrap; }
        div.browseMenu li:hover { text-decoration: underline; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="section"> <!-- you didn't this to be relatively positioned -->
        <div style="float: left; padding-left: 100px;">
            Left Content
        </div>
        <div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
            Browse
            <div class="browseMenu">
                <ul>
                    <a href="http://www.google.com/"><li>Google</li></a>
                    <a href="http://www.yahoo.com/"><li>Yahoo</li></a>
                    <a href="http://www.bing.com/"><li>Bing</li></a>
                </ul>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="section"><!-- removed wrapping div with relative positioning here-->
        <div style="float: left; width: 40%; padding: 5%;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
            tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
            scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
            faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
            Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
            et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
            libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
            sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
            Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
            augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
        </div>
        <div style="background-color:red; float: left; width: 40%; padding: 5%;">
            Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
            mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
            placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
            Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
            sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
            vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
            dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
            In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
            odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
            justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
            sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        </div>
        <div style="clear: both;"></div>
    </div>
    <script type="text/javascript">
        // Toggle the browse menu.
        $('.toggleBrowseMenu').click(function ()
        {
            $('.browseMenu').toggle();
        });

        // Hide the browse menu when the mouse leaves the tag.
        $('.browseMenu').mouseleave(function ()
        {
            $(this).hide();
        });
    </script>
</body>
</html>

Now, don't quote me on this solution because I am only using an IE7 tester, not actual IE7, but it usually works out for me. Currently, I changed your right section background-color to red. You can fix that.

What was wrong was, you had an extra div wrapping your section class containing the content with a "position:relative" for styling. The div was unnamed, and therefore could not be referenced with a stylesheet, so I deleted it. Also, in the first section div class you misspelled relative how I completely removed it, because you don't need it. I set every items z-index to 1 initially and upped your z-index on the .browsemenu class to 10.
Also, the paragraph where "Fusce adipi...." starts, the div wrapping that randomly contained the word peach in the style referencing.

I made comments for all my edits.
Good luck and I hope this helped.

久光 2024-12-03 15:13:52

我不知道为什么你认为菜单应该出现在内容之上; z-index 仅适用于相对于兄弟姐妹。您可以在最顶部添加 z-index,如果您还正确拼写 relative,您应该会发现菜单按照您想要的方式显示。

I don't know why you think the menu should appear over the content; z-index only applies relative to siblings. You could add z-index on the topmost section, and if you then also spell relative correctly you should find that the menu appears how you want it to.

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