IE8 没有将绝对定位的元素排除在外
Posted
技术标签:
【中文标题】IE8 没有将绝对定位的元素排除在外【英文标题】：IE8 not taking absolutely positioned element out of flow 【发布时间】：2014-08-16 12:43:20 【问题描述】：所以我遇到了一个在 IE8 中无法解决的错误。我见过一些傻瓜，但这个可能会拿走蛋糕。
我尝试在 Codepen 中复制它，但我们有很多代码，所以我会尝试包含来自 IE8 的计算样式。
使用 Foundation 5，我有一个顶部栏，开始看起来像这样：
下拉菜单是绝对定位的，所以它显然不应该伸出父容器。它实际上并没有伸出父母，而是伸出祖父母。这是标记：
<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
<ul class="title-area">
<li class="name">
<a href="">Title</a>
</li>
</ul>
</section>
<section class="links top-bar-section">
<ul class="left">
<li class="divider"></li>
<li><a href="">Create</a>
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a>Explore</a>
<ul class="dropdown tab-left" id="explore-menu">
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li><a href="#">Find</a>
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li class="has-form search">
<form id="header_search" name="search_form">
<input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" />
<button id="search_submit"></button>
</form>
</li>
<li class="login">
<a href="javascript:;" id="launch-login">Login</a>
</li>
</ul>
</section>
从 IE8 计算的 CSS：
#global-nav //this is the topbar that is stretching
background: #2a2d43;
background-image: none;
color: #666;
display: block !important;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: 80px;
line-height: 60px;
margin: 0px;
overflow: visible;
padding: 0;
position: relative;
vertical-align: baseline;
width: 100%;
li.has-dropdown .dropdown
background: #fff;
box-sizing: border-box;
clip: rect(1px 1px 1px 1px);
z-index: 99;
color: #666;
display: block;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: auto !important;
left: 10%;
line-height: 60px;
margin: 0;
max-height: none;
max-width: 200px;
overflow: hidden;
padding: 0px;
position: absolute !important;
right: auto;
top: 64px;
vertical-align: baseline;
visibility: hidden;
width: auto;
li.has-dropdown.hover .dropdown //the open dropdown state
clip: rect(auto auto auto auto);
visibility: visible;
如果您需要更多信息，请告诉我。提前致谢。
作为参考，我正在使用 IE8 文档模式和 IE8 标准在带有 IE8 的 Win7 Parallels VM 上进行测试。
【问题讨论】：
Foundation 5 根本不支持 IE8 foundation.zurb.com/docs/compatibility.html 并且在 F4 foundation.zurb.com/docs/v/4.3.2/support.html 中只有部分支持，如果您想要完全支持 IE8，请使用 F3。还有***.com/questions/tagged/… 我知道这一点，并且我已经解决了大部分不起作用的问题。这是一个关于一个非常具体的问题的非常具体的问题。 我看到了一些尝试让 F5 IE8 兼容而没有像这样的 JS 部分foundation.zurb.com/forum/posts/241-foundation-5-and-ie8 但目前尚不清楚该解决方案的可靠性，并且很难确定您是否已经解决了大多数问题或只是一些。 我都知道，问题不在于Foundation，而特别是CSS和IE8的问题。我不需要 Foundation 方面的帮助，我需要有关此下拉菜单不脱离流程的帮助。 您的 html<nav id="global-nav" 和您的 css #nav-global。看出区别了吗？
【参考方案1】：
您有查看此链接的链接吗？我想知道您是否应该将 ul 设置为相对位置。我认为 li 正在回落到第一个相对定位的项目。希望这会有所帮助。
【讨论】：
对不起，我没有。即使它回退到第一个相对定位的项目，它仍然不应该留在流程中。 您有查看此链接的链接吗？【参考方案2】：如果绝对元素的任何父元素具有 position: relative 则绝对值是相对于该元素计算的，
尝试从父容器中删除 position: relative 可能会有所帮助
还要确保你有正确的
<!DOCTYPE html>
在文件的开头
【讨论】：
无论哪个元素有 position:relative ，它都不应该扩展包含元素。 position:absolute 应该将元素从流中取出，因此无论其定位到哪个元素，它的父级都不应该扩展。【参考方案3】：这不是 IE8 渲染错误，而是某处的编码错误/不兼容。此演示代码显示 IE8 确实将绝对定位的下拉元素从流中取出：
<!DOCTYPE html>
<head>
<title>Demo IE8 Drop-Down Menu</title>
<meta charset="utf-8">
<style>
#navDivParent /* = grandparent of the dropdown menu */
background-color: darkblue;
text-align: right;
color: white;
height: 100px;
width: 550px;
#navDiv ul
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
#navDiv ul li
float: left;
position: relative;
margin-right: 10px;
#navDiv ul li ul li
clear: left;
#navDiv ul ul
display: none;
#navDiv ul li:hover ul
display: block;
position: absolute;
#navDiv a
display: block;
padding: 0 10px 0 10px;
background: yellow;
color: blue;
text-decoration: none;
#navDiv #item2SubList a
width: 175px;
#navDiv a:hover
background: red;
color: white;
</style>
</head>
<body>
<div id="navDivParent">This is the grandparent<br> of the dropdown menu.
<div id="navDiv">
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item w/ child</a>
<ul id="item2SubList">
<li><a href="#">Menu sub-item</a></li>
<li><a href="#">Menu sub-item</a></li>
<li><a href="#">Menu sub-item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a></li>
</ul>
</div>
</div>
</body>
</html>
. 由于JSFiddle、JSBin 等在IE8 中不起作用，所以我没有进行现场演示，但我在真正的IE8 和IE9 的IE8 模式下都对其进行了测试。
由于问题中提供的代码不包含 CSS :hover 状态声明，编码错误/不兼容可能存在于驱动悬停状态的 Javascript 中。
【讨论】：
【参考方案4】：您的下拉菜单的最大宽度为 200 像素。 IE8 不能很好地处理最大宽度。本质上它被视为宽度声明。您在 IE8 中强制宽度为 200px。您需要将其设置为无...
max-width:none\9; /* IE8 */
【讨论】：
【参考方案5】：我不认为这个“错误”与位置有任何关系：absolute;不将 .dropdown 从流程中移除。 li.has-dropdown 也应用了 .hover 状态。可能有一些其他样式应用于 li.has-dropdown 导致#global-nav 转移。也许一些额外的填充被应用于 li.has-dropdown。不幸的是，我们没有正确调试它的所有代码。
【讨论】：
以上是关于IE8 没有将绝对定位的元素排除在外的主要内容，如果未能解决你的问题，请参考以下文章