我在以下网站上使用iFrame进行在线预订,如下所示:
http://www.marandy.com/one2onev2
在Chrome或IE浏览器中,y轴上的滚动条按预期显示,但在Chrome中似乎没有显示。
以下是代码:
HTML
<div id="main-online-booking">
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" scrolling="no" frameborder="0"></iframe>
<div id="main-online-user">
<a href="#" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" /></a>
<a href="#" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" /></a>
</div>
</div>
CSS
#main-online-booking {
height: 488px;
border-bottom: 6px #939393 solid;
border-left: 6px #939393 solid;
border-right: 6px #939393 solid;
z-index: 4;
background-color: #fff;
}
#main-online-frame {
overflow-x: hidden;
overflow-y: scroll;
frameBorder: 0;
height: 488px;
}
为什么这不起作用的任何想法或如何让它像在Firefox / IE中一样工作?
任何帮助将不胜感激! : - )
答案 0 :(得分:2)
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" scrolling="no" frameborder="0"></iframe>
将scrolling =“no”更改为scrolling =“yes”。
那应该做的工作。
请务必刷新页面,只有当任何功能放大内容时才会显示滚动。
答案 1 :(得分:1)
尝试添加溢出:滚动到#main-online-booking,然后根据自己喜欢的方式调整高度。
CSS:
#main-online-booking {
overflow:scroll;
z-index: 4;
height: 488px; /*adjust this to your desire*/
border-bottom: 6px #939393 solid;
border-left: 6px #939393 solid;
border-right: 6px #939393 solid;
background-color: #fff;
}
#main-online-frame {
frameBorder: 0;
height: 488px; /*adjust this to your desire*/
width: 600px;
}
您可以查看我的jsfiddle demo here。
答案 2 :(得分:0)
只需将width
属性添加到iframe。
实施例
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" scrolling="no" frameborder="0" width="600px"></iframe>