5

Iframe と Firefox に問題があります。基本的に、私は IFrame をサイトに埋め込んでいます。これは、全身領域を占めるためです。ここでわかるように、Google chrome と完全に連携します。I フレームはすべてのボディ領域を占有し、iframe をナビゲートするためにスクロールバーは必要ありません。

クロム: http://i.stack.imgur.com/muo3U.png

しかし、firefox では正しく動作しません。ここでわかるように、iframe の一部のみが表示され、iframe をナビゲートするにはスクロールバー (非表示ですがスクロールは機能します) を使用する必要があります。私のウェブサイトの目的にとって、それは非常に魅力的ではありません。

Firefox: http://i.stack.imgur.com/6Vm1O.png

それで、どうすればこれを機能させることができるのだろうか？検索して検索しましたが、試したすべてのソリューションが機能しなくなりました。

ここに私のコードと私が試した他のコードがあります。

http://pastebin.com/rmdcnLuw

助けてくれてありがとう！

4

2 に答える 2

8

bodyandhtml要素をに設定する必要がありますheight: 100%

次のようなことを試してください：

<html style="height: 100%">
<body style="height: 100%">
    <div style="width:100%; height:100%; background-color:transparent;">
    <iframe src="http://www.google.com/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
  </div>
</body>
</html>

さらに良いことに、これらのルールを次のように CSS ファイルに追加します。

body, html { height: 100%; }

これを試すこともできます：

CSS:

html, body { height: 100%; }
iframe { width: 100%; height: 100%; }

HTML:

<html>
<body>
      <iframe src="http://www.google.com" frameborder="0" scrolling="no"></iframe>
</body>
</html>

フレームボーダーとスクロールをCSSに移動する代替

border: none;iframe の境界線を削除し、overflow: hidden;スクロールを無効にし、ページから切り取られたコンテンツ (元のコードなど) を非表示にします。

CSS:

html, body { height: 100%; overflow: hidden; }
iframe { width: 100%; height: 100%; border: none; overflow: hidden; }

HTML:

<html>
<body>
      <iframe src="http://en.wikipedia.org"></iframe>
</body>
</html>
于 2013-02-09T05:41:25.817 に答える
1

あなたのcssでこれを試してください：

iframe { display:block; width:100%; border:none;}
于 2013-02-09T05:36:15.203 に答える