Question

我有一个包含3个iframe的网站但没有一个可以工作，虽然文字长于windows：在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 code：

<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;
}

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

2 个答案: