IE7中的绝对定位元素错误

时间：2011-07-26 22:31:45

标签： html css internet-explorer css-position

我遇到一个问题，一个绝对定位的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>

2 个答案:

答案 0 :(得分：1)

我不知道为什么你认为菜单应该出现在内容上; z-index仅适用于兄弟姐妹。您可以在最上面的部分添加z-index，然后如果您还正确拼写relative，您会发现该菜单会以您希望的方式显示。

答案 1 :(得分：1)

好的！这就是我们得到的。

<!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包装你的section类，其中包含带有“position：relative”的内容，用于样式化。 div未命名，因此无法使用样式表引用，因此我删除了它。另外，在第一节div类中，你拼错了相对于我如何完全删除它，因为你不需要它。我最初将每个项目的z-index设置为1，并将.browsemenu类上的z-index提高到10。 另外，“Fusce adipi ....”开头的段落，div包装随机包含了桃子这个词在引用的样式中。

我为所有编辑做了评论。 祝你好运，我希望这会有所帮助。

相关问题
最新问题