1

私は 3 つの iframe を持つ Web サイトを持っていますが、テキストがウィンドウよりも長いにもかかわらず、どれも機能しません。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>
4

2 に答える 2

0

Javad が上で述べたように、iframe 要素では、ページのスクロールに関連して要素をロックするという事実に基づいて、使用すると一部のブラウザーで問題が発生する可能性があるoverflow:scrollと思います。あなたの状況については何も知りませんが、 のposition:fixed使用を検討してください。position:absolute

于 2013-07-02T10:17:13.553 に答える