【发布时间】：2018-04-12 02:49:54
【问题描述】：
我已经使用 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;
}
感谢有人可以帮助我解决这个问题。
谢谢。
【问题讨论】：
标签： html css internet-explorer iframe