3

我在以下网站上为在线预订系统使用 iFrame，如下所示：

http://www.marandy.com/one2onev2

iFrame 应该只在 y 轴上显示滚动条。在 Firefox、IE 和 Safari 中，这按预期工作，但在 Google Chrome 中，这仍然显示两个滚动条（y 和 x）。

这是代码： -

HTML

        <div id="main-online-booking">

            <iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" 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;
    frameBorder: 0;
    height: 488px;
}

该overflow-x: hidden属性似乎仅在 iFrame 上的 Google Chrome 中不起作用，有什么建议吗？

4

3 回答 3

2

我遇到了同样的问题，Chrome 没有正确应用 overflow-x:hidden，但所有其他浏览器都是。它不是 iFrame，而是 div。我为此苦苦挣扎了大约 4 周，最后发现如果我简单地将 position:relative 应用于同一个 div，它将正常工作。希望这对某人有帮助。

于 2013-04-16T03:46:15.923 回答
2

添加您的 iframescrolling="no"并增加高度#main-online-frame.......

于 2013-03-30T09:12:53.593 回答
2

在 iframe ( http://www.marandy.com/one2oneob/login-guest.php ) 内的页面上，添加这个html {overflow-x: hidden; overflow-y: auto;}。

并检查 iframe 内页面的初始高度。确保初始高度适合 iframe 的高度。

于 2013-03-30T09:17:27.347 回答