2

不要なスクロールバーを追加するFirefoxに問題があります（ChromeとIEで問題なく動作します）。

次の 2 つのファイルを参照してください: page.html と iframe.html。

Page.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #myframe {
            height: 550px;
            overflow: auto;
            width: 665px;
        }
    </style>
</head>
<body style="background-color:#dcdcdc;">
        <iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">
        </iframe>
</body>
</html>

Iframe.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html {
            direction: rtl;
        }
    </style>
</head>
<body>
    <div style="width: 665px; height: 537px; background-color: blue;">
        x
    </div>
</body>
</html>

Firefox v30 では、常に垂直および水平スクロール バーが表示されます。iframe.html のコンテンツのサイズは、iframe タグのサイズと同じです。

iframe.html ファイルで direction:rtl タグを使用することに問題を絞り込みました。direction:rtl を追加すると、スクロールバーが表示され、それを削除すると問題が解決します。

理由はありますか？

iframe で scrolling="no" を使用せずにこれを修正するにはどうすればよいですか?

編集： overflow:hiddenを追加することが解決策だとは思いません。コンテンツは「オーバーフロー」してはなりません-親よりも小さいです。また、コンテンツが長い場合に備えて、コンテンツがオーバーフローしてスクロールバーを表示するオプションが欲しいです。

ご協力いただきありがとうございます ：）

ここに画像の説明を入力

4

2 に答える 2

0

変化する：

<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">

これとともに：

<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0"  src="iframe.html" style="display: inline;">

代わりに、css ルールの最後に !important を追加します

<style type="text/css">
    #myframe {
        height: 550px;
        overflow: hidden !important;
        width: 665px;
    }
</style>
于 2014-07-14T15:33:20.297 に答える
0

iframe のスタイルを overflow:hidden... に設定します。

<iframe id="myframe" style="display: inline; overflow: hidden; border: 0; margin: 0" scrolling="auto" src="iframe.html" >
</iframe>
于 2014-07-14T15:35:20.133 に答える