I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail. Below is my code for a simple drop-down menu. It works fine in every browser except IE.
我很难过。香港专业教育学院试图把位置:相对和各种z指数无济于事。下面是我的简单下拉菜单的代码。它在除IE之外的每个浏览器中都能正常工
html page:
<div id="nav">
<ul id="navul">
<li id="rootHome">
<ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
"height: 40px;" id="home" /></a>
</li>
<li id="rootProducts" onclick="showMenu(this)">Products
<ul id="Products">
<li>
<p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
</li>
</ul>
</li>
<li id="rootNews">
<a href="#Link for news" class="navLink">News</a>
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<ul id="Company">
<li>
<p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
</li>
<li>
<p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
Us</p>
</li>
</ul>
</li>
</ul>
CSS: (formatting didn't work on here) http://pastebin.com/raw.php?i=CjyQhXCs
CSS :(格式化不起作用)http://pastebin.com/raw.php?i=CjyQhXCs
2 个解决方案
#1
5
Try using
position: relative
and
z-index: 100
on the
id=nav
div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
尝试在id = nav div上使用position:relative和z-index:100。 Z索引分层工作。如果元素的父元素的z-index为0,并且该元素的z-index为100,则该元素仍将出现在另一个元素后面,该元素是z-index为1的父元素。
The issue was a direct result of using the filter
on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
问题是在#navul ul上使用过滤器的直接结果。在其计算的某处,IE使元素自动隐藏任何溢出。要修复,将背景移动到自己的元素并绝对定位它。
Credit to:
如何阻止Internet Explorer的专有渐变过滤器切断应溢出的内容?
#2
0
Just like @Stu, I had a filter on my nav ul (in my case, .navbar):
就像@Stu一样,我的nav ul(在我的例子中是.navbar)有一个过滤器:
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per @Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!
每个@Greg,一旦我删除了该过滤器,下拉菜单就会停留在IE9中的页面内容之上。谢谢你,救了我的一天!
#1
5
Try using
position: relative
and
z-index: 100
on the
id=nav
div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
尝试在id = nav div上使用position:relative和z-index:100。 Z索引分层工作。如果元素的父元素的z-index为0,并且该元素的z-index为100,则该元素仍将出现在另一个元素后面,该元素是z-index为1的父元素。
The issue was a direct result of using the filter
on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
问题是在#navul ul上使用过滤器的直接结果。在其计算的某处,IE使元素自动隐藏任何溢出。要修复,将背景移动到自己的元素并绝对定位它。
Credit to:
如何阻止Internet Explorer的专有渐变过滤器切断应溢出的内容?
#2
0
Just like @Stu, I had a filter on my nav ul (in my case, .navbar):
就像@Stu一样,我的nav ul(在我的例子中是.navbar)有一个过滤器:
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per @Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!
每个@Greg,一旦我删除了该过滤器,下拉菜单就会停留在IE9中的页面内容之上。谢谢你,救了我的一天!