HTML/CSS：为什么滚动在 iframe 中不起作用？

Question

我有一个包含 3 个 iframe 的网站，但它们都不起作用，尽管文本比窗口长：在 Firefox 中，滚动条出现但不起作用；在 Chrome 中，这些栏甚至不会出现。他们确实在 IE 6 中滚动。

所以我怀疑 CSS 有问题。可能是些微不足道的事情，但我看不到。

CSS 代码：

.header
{
position:fixed;
top:0%;
right:0%;
height:4%;
width:100%;
text-align:center;
background-color:#BF1E4B;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
z-index:+1;
}

.nav,.nav ul
{
list-style:none;
margin:0.5%;
padding:0;
}

.nav
{
top:0%;
left:0%;
position:absolute;
}

.nav ul
{
height:0;
left:0;
position:absolute;
overflow:hidden;
top:100%;
}

.nav li
{
float:left;
position:relative;
}

.nav li a
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
background-color:#BF1E4B;
color:#fff;
display:block;
font-size:100%;
line-height:100%;
padding:4px 35px;
text-decoration:none;
transition:0.1s;
}

.nav li:hover > a
{
background:#000;
color:#fff;
}

.nav li:hover ul.subs
{
height:auto;
 width:100%;
}

.nav ul li
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
opacity:0;
transition:0.1s;
width:100%;
}

.nav li:hover ul li
{
opacity:1;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}

.nav ul li a
{
background:#BF1E4B;
color:#fff;
line-height:0%;
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
transition:0.1s;
}

.nav li:hover ul li a {
    line-height:150%;
}

.nav ul li a:hover
{
background:#000;
}

.iframe1
{
position:fixed;
bottom:48%;
right:0%;
height:48%;
width:50%;
}

.iframe2
{
position:fixed;
top:4%;
left:0%;
height:96%;
width:50%;
}

.iframe3
{
position:fixed;
top:52%;
right:0%;
height:48%;
width:50%;
}

对于业余的看法，抱歉，在此先感谢 :)

HTML 代码：

<div class="header">
<ul class="nav">

<li><a href="">Links</a>
<ul class="subs">
<li><a href="xxx" target="_blank">link</a></li>
<li><a href="xxx" target="_blank">link</a></li>
<li><a href="xxx" target="_blank">link</a></li>
</ul>
</li>

</li>
</ul>
<div style="clear:both"></div>
</div>

<div class="iframe1">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>

<div class="iframe2"">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>

<div class="iframe3">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>

Answer 1

正如 Javid 上面所说，overflow:scroll 在 iframe 元素上，尽管我认为使用 position:fixed 可能会在某些浏览器上导致问题，因为它会锁定相对于页面滚动的元素。考虑使用position:absolute，虽然我对你的情况一无所知。

Answer 2

尝试使用 z-index 值，您可能会覆盖它，在 iframe 中将其更改为 1000，然后您仍然无法使用它

{
   z-index: 1000;
}