html - IE7 中的绝对定位元素错误-6ren

html - IE7 中的绝对定位元素错误

转载作者：行者123 更新时间：2023-11-28 13:42:59

我遇到一个绝对定位的 div 隐藏在 float div 后面的问题。我已经在堆栈上做了很多阅读以获得这个问题的答案，但我没有尝试过，所以我将把源代码放在这里。我不知道我错过了什么。

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

<!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>

最佳答案

好的!这是我们得到的。

<!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 类中，你拼错了 relative 我是如何完全删除它的，因为你不需要它。我最初将每个元素的 z-index 设置为 1，并将 .browsemenu 类上的 z-index 提高到 10。此外，“Fusce adipi...”开始的段落，在样式引用中随机包含单词 peach 的 div 包装。

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

关于html - IE7 中的绝对定位元素错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6837404/

文章推荐： html - 复杂 Div( float /清除)- 两个主列 + 较小的内部列

文章推荐： css - 如何选择

by CSS?

npm 安装不起作用 | npm 错误!路径 | npm 错误!代码 | npm 错误!错误 | npm 错误!系统调用 | npm 错误!恩恩特
我已经使用 vue-cli 两个星期了，直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
python - pytesseract 错误 Windows 错误 [错误 2]
您好，我正在尝试使用 python 库 pytesseract 从图像中提取文本。请找到代码: from PIL import Image from pytesseract import image_
C 错误 TLS 错误
我的错误 /usr/bin/ld: errno: TLS definition in /lib/libc.so.6 section .tbss mismatches non-TLS reference
r - 错误 `contrasts' 错误
我已经训练了一个模型，我正在尝试使用 predict函数但它返回以下错误。 Error in contrasts<-(*tmp*, value = contr.funs[1 + isOF[nn]])
postgresql - PowerBI 直接查询连接到 PostgreSQL 错误。 OLE 或 ODBC 错误 : [Expression. 错误] 我们无法将表达式折叠到数据源
根据Microsoft DataConnectors的信息我想通过 this ODBC driver 创建一个从 PowerBi 到 PostgreSQL 的连接器使用直接查询。我重用了 Micros
java - Android MediaPlayer 错误(在状态 1 中开始调用；错误 (-38, 0)；错误 (-38,0))
我已经为 SoundManagement 创建了一个包，其中有一个扩展 MediaPlayer 的类。我希望全局控制这个变量。这是我的代码: package soundmanagement; impo
heroku - PG::错误:错误:Heroku的内存不足
我在Heroku上部署了一个应用程序。我正在使用免费服务。我经常收到以下错误消息。 PG::Error: ERROR: out of memory 如果刷新浏览器，就可以了。但是随后，它又随机发生
.htaccess - .htaccess 错误，错误 500
我正在运行 LAMP 服务器，这个 .htaccess 给我一个 500 错误。其作用是过滤关键字并重定向到相应的域名。 Options +FollowSymLinks RewriteEngine
robocopy 错误，错误 32 (0x00000020)
我有两个驱动器 A 和 B。使用 python 脚本，我在“A”驱动器中创建一些文件，并运行 powerscript，该脚本以 1 秒的间隔将驱动器 A 中的所有文件复制到驱动器 B。我在 powe
postgresql 错误 - 错误 : input is out of range
下面的函数一直返回这个错误信息。我认为可能是 double_precision 字段类型导致了这种情况，我尝试使用 CAST，但要么不是这样，要么我没有做对...帮助？这是错误: ERROR: i
mysql - 错误 1064 MySQL 错误
这个问题已经有答案了: Syntax error due to using a reserved word as a table or column name in MySQL (1 个回答) 已关闭
mysql - mysql 错误(错误 1136)
我的数据库有这个小问题。我创建了一个表“articoli”，其中包含商品的品牌、型号和价格。每篇文章都由一个 id (ID_ARTICOLO)` 定义，它是一个自动递增字段。好吧，现在当我尝试插
c++ - 错误 C2228、错误 C2275
我是新来的。我目前正在 DeVry 在线学习中级 C++ 编程。我们正在使用 C++ Primer Plus 这本书，到目前为止我一直做得很好。我的老师最近向我们扔了一个曲线球。我目前的任务是这样的:
c++ - 错误 LNK2019 错误 C++
这个问题在这里已经有了答案: What is an undefined reference/unresolved external symbol error and how do I fix it?
html - 奇怪的 IE7 错误/错误
我的网站中有一段代码有问题；此错误仅发生在 Internet Explorer 7 中。我没有在这里发布我所有的 HTML/CSS 标记，而是发布了网站的一个版本 here . 如您所见，我在列中有
node.js - 错误!错误 : EPERM,
如果尝试在 USB 设备上构建 node.js 应用程序时在我的树莓派上使用 npm 时遇到一些问题。 package.json 看起来像这样: { "name" : "node-todo",
python - 无 Python 错误/错误？
在 Python 中，您有 None单例，在某些情况下表现得很奇怪: >>> a = None >>> type(a) >>> isinstance(a,None) Traceback (most
java - Android Studio 错误 - 错误 :java. util.concurrent.ExecutionException : com. android.tools.aapt2.Aapt2Exception:AAPT 错误
这是我的 build.gradle (Module:app) 文件: apply plugin: 'com.android.application' android { compileSdkV
android - 任务 ':app:compileDebugJavaWithJavac' 执行失败。错误 :(2055, 52) 错误 : ';' expected Error:(2055, 59) 错误:<标识符> 预期
我是 android 的新手，我的项目刚才编译和运行正常，但在我尝试实现抽屉导航后，它给了我这个错误 FAILURE: Build failed with an exception. What wen
PHP 7.2.25 错误!= 错误？
谁能解释一下？我想我正在做一些非常愚蠢的事情，并且急切地等待着启蒙。我得到这个输出: phpversion() == 7.2.25-1+0~20191128.32+debian8~1.gbp108

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - IE7 中的绝对定位元素错误