0
CSS3とiframeタグを一緒に使用してメニューバーを作成しました。メインメニューIEのiframeの内側にCSSがあります。
しかし、私のCSSメニューはiframe内のPDFの後ろに隠れています（IEのみ）。 Google Chromeでは正常に動作します。しかし、IEでは、まったく動作しません。 。問題は、iframe pdfの背後にあるCSSメニューの非表示です。
私は何が間違っているのか分かりません。私は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;
}
誰かがこの問題を解決するために私を助けることができる場合は感謝しています。
ありがとうございました。
フィードバックいただきありがとうございます。まずそれを試してみてください。 。 :) – AlotJai
あなたはあなたの答えに私のコードを更新できますか？ – AlotJai
上記のコードをあなたの答えで更新できますか？あなたのコードは空のiframeとして追加すると動作するようです。しかし、