«
»

IE8でのiframe問題

2009年 5月 8日 (金) / PM 8:03

iframe枠と同じサイズのFlashを表示するサイトがあったのですが、Internet Explorer 8のみFlashの下部にスペースが発生するしてしまい、スクロールバーが表示されてしまう問題。

　←　画像っぽく見えますがFlashです。多分、IE8だけスクロールバーが出ています。

iframe内で表示しているページのHTMLソース　【Adobe Dreamweaver CS3 で制作】

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
* {margin:0;padding:0}
-->
</style>
<script src="../js/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','150','height','100','src','sample','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','sample' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="150" height="100">
  <param name="movie" value="sample.swf" />
  <param name="quality" value="high" />
  <embed src="sample.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="150" height="100"></embed>
</object></noscript>
</body>
</html>

iframe部分のHTMLソース

<iframe src="http://latup.com/sample/iframe-ie8/flash1.htm" frameborder="0" width="150" height="100" style="overflow:hidden;"></iframe>

CSSでオーバーフロー部分を非表示と指定してもInternet Explorer 8ではやっぱりスクロールバーが出てしまう。
困った。

色々とテストしてるとFlashではなく画像でも同じようにスクロールバーが出てくる事も分かりました。
　←これはFlashではなくGIF画像。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
* {margin:0;padding:0}
-->
</style>
</head>
<body>
<img src="sample.gif" />
</body>
</html>

具体的な解決策はまだ見つけられないのですが、とり合えずMETAタグでIE7モード（下記）に指定する事で対処。
　←IE7モード指定。

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />

コメント投稿で教えてもらいました。ありがとうございます。
　←　scrolling=no を指定。

<iframe src="http://latup.com/sample/iframe-ie8/flash1.htm" frameborder="0" width="150" height="100" scrolling="no"></iframe>

タグ:

“IE8でのiframe問題” へのコメントが2件あります。 »

  1. latup より:
    2009 年 8 月 12 日 PM 11:05

    content=”IE=emulateIE7″で対応してましたが言われるようにscrolling=noで解決しました。

    ありがとうございます。

    しかし、IE7までは効いていたstyle=”overflow:hidden;”がIE8になって効かないとは・・・
    HTML部分は出来るだけシンプルにしたいのですがねぇ。

    『IE8でiframeを使ったフラッシュが透過になっていない』という症状は初耳ですね。
    親フレームの背景色でも影響してるんでしょうか？

  2. 匿名 より:
    2009 年 8 月 12 日 AM 4:15

    解決してるかもしれませんが

    scrolling=no でやってます。
    style=”overflow:hidden;” は効いてないかもしれません。
    IE7は、frameborder=”0″ は効くけど、style=”border:0;” は効か無かったです。
    IE8は使っていないので、参考までに。

    IE8 フラッシュ iframe で検索したらここへ来ました。
    私はIE8でiframeを使ったフラッシュが透過になっていないと言うので調べています。

コメントを残す

«
»