3

以下に示すように、オンライン予約システム用に次の Web サイトで 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

iframe 内のページ ( http://www.marandy.com/one2oneob/login-guest.php ) に、これを追加しhtml {overflow-x: hidden; overflow-y: auto;}ます。

そして、iframe 内のページの初期の高さを確認します。初期の高さが iframe の高さに収まるようにしてください。

于 2013-03-30T09:17:27.347 に答える
2

Chrome が overflow-x:hidden を正しく適用していなかったのと同じ問題に遭遇しましたが、他のすべてのブラウザーは適用されていました。iFrame ではなく、div でした。私はこれに約 4 週間苦労しましたが、同じ div に対して単に position:relative を適用すると、適切に機能することが最終的にわかりました。うまくいけば、これは誰かに役立ちます。

于 2013-04-16T03:46:15.923 に答える
2

あなたのiframescrolling="no"を追加して高さを増やしてください#main-online-frame.......

于 2013-03-30T09:12:53.593 に答える