Question

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

http://www.marandy.com/one2onev2

iFrame应该只在y轴上显示滚动条。在Firefox，IE和Safari中，这可以正常运行，但是在谷歌浏览器中，它仍然显示两个滚动条（y＆amp; 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中有效，有任何建议吗？

Answer 1

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

Answer 2

我遇到了同样的问题，Chrome没有正确应用overflow-x：hidden，但所有其他浏览器都是。它不是一个iFrame，而是一个div。我挣扎了大约4个星期，终于发现如果我只是应用位置：相对于同一个div，它将正常工作。希望这对某人有帮助。

Answer 3

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

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

Overflow-x隐藏在使用iFrame的Google Chrome中无效

3 个答案: