我使用 CSS3 创建了菜单栏，并使用 iframe 标签在其中加载 PDF 文件。
但我的 CSS 菜单隐藏在 iframe 中的 PDF 后面(仅在 IE 中)。在谷歌浏览器中它工作正常。但在 IE 中，根本不起作用。 .问题是 CSS 菜单隐藏在 iframe pdf 后面。
我不确定它有什么问题。我尝试添加 z-index 但它不起作用。
这是我的代码如下。
test.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="styletest.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="wrapper row">
<nav id="mainav" class="hoc clear">
<ul class="clear">
<li class="active"><a href="index.php">Home</a></li>
<li><a class="drop" href="">About Us</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a class="drop" href="">Sub menu 3</a>
<ul>
<li><a href="#">Extra sub menu 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<iframe id="pdf" src="images/test.pdf#zoom=65&scrollbar=0" width= "100%" height= "700"></iframe>
</body>
</html>
teststyle.css
/* Menu Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol {
margin:0;
padding:0;
list-style:none;
}
#mainav li a{
color:inherit;
background-color:inherit;
}
#mainav .active a, #mainav a:hover, #mainav li:hover > ab{
color:#00BCDF;
background-color:inherit;
}
#mainav li li a, #mainav .active li a {
color:#FFFFFF;
background-color:rgba(0,0,0,1);
border-color:rgba(0,0,0,.6);
}
#mainav li li:hover > a, #mainav .active .active > a {
color:#FFFFFF;
background-color:#00BCDF;
}
#mainav, #breadcrumb, .sidebar nav {
line-height:normal;
}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after {
position:absolute;
font-family:"FontAwesome";
font-size:10px;
line-height:10px;
}
#mainav ul {
text-transform:uppercase;
border-top:1px solid #999;
}
#mainav ul ul {
z-index:9999;
position:absolute;
width:180px;
text-transform:none;
font-weight:400;
}
#mainav ul ul ul {
left:180px; top:0;
}
#mainav li {
display:inline-block;
position:relative;
margin:0 15px 0 0;
padding: 0;
}
#mainav li:last-child {
margin:0;
}
#mainav li a {
display: block;
padding: 20px 0;
}
#mainav li li {
width:100%;
}
#mainav li li a {
border:solid;
border-width:0 0 0 0;
}
#mainav .drop {
padding-left:15px;
}
#mainav li li a, #mainav li li .drop {
display:block;
margin:0;
padding:10px 15px;
}
#mainav ul ul {
visibility:hidden; opacity:0;
}
#mainav ul li:hover > ul {
visibility:visible;
opacity:1;
}
@media (max-width:900px) and (min-width:0px) {
#mainav ul {
font-size: 11px;
}
}
.cover {
border: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
#pdf {
position: relative;
z-index: 1;
}
如果有人能帮我解决这个问题，我将不胜感激。
谢谢。
最佳答案
我过去曾在 Internet Explorer 中注意到过这个问题(在我的例子中，是一个带有 Flash 元素的 iframe。)
我的解决方法是在页面上放置一个空的 iframe，在您实际想要显示的元素后面。这将“掩盖”其他 iframe，但允许您的元素可见。
在您的情况下，将以下代码放入每个 LI 标记内似乎可行:
<iframe style="background-color: transparent; left: 0; top: 0; width: 100%; height: 100%; position: absolute; border-width: 0; z-index: -1"></iframe>
当然，这些样式可能应该只是在一个类中，您可以将该类提供给 iframe。
关于html - 主菜单 CSS 位于 IE 中 iframe 内的 pdf 后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47026860/