10

私は現在、ウェブサイトでミクストメディアの回転モンタージュを開発しています。サイトにローテーションで表示される約5つの画像/ビデオがあります。このサイトもEktronCMSを使用しているため、モンタージュのどのスロットが画像になり、どのスロットがビデオになるかを判断する方法はありません。（ビデオはYouTubeでホストされています。）

だから、私の問題は、ビデオがiframeの内側の端に完全に整列して読み込まれることですが、画像はiframeの内側に約10pxのわずかなマージンで読み込まれます。これは、サイトが非常に正確にレイアウトされており、1ピクセルでも混乱する可能性があります。これはFireFoxとIEでのみ表示されます。ChromeとSafariでテストしましたが、完全に機能します。これらの4つのブラウザは、私たちが公式にサポートしている4つだけです。

これが私のHTMLです：

<head>
    <body>
      <div id="mainImage">
        <iframe scrolling="no" frameborder="0" runat="server" id="MainImage1"
        src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent">
        IFRAMES do not work in your browser</iframe>
        <iframe scrolling="no" frameborder="0" runat="server" id="MainImage2"
        src="images/default/mainImage/mainImage_02.jpg">
        IFRAMES do not work in your browser</iframe>
      </div>
    </body>
</head

CSSは次のとおりです。

#mainImage iframe{position:absolute; top:0; left: 0; padding:12px 0 0 12px; display:block;}
#mainImage iframe html, body{ margin:0px; padding:0px; border:0px;}

これは、iframeの表示方法に積極的に影響を与えるサイト上の唯一のコードです。

だから、私の質問は、iframe内のそのマージンをどのように取り除くことができますか、そしてなぜそれがFireFoxとIEでのみ表示されるのですか？

4

2 に答える 2

2

これを制御するのはIframeコンテンツの本体であり、Iframe自体ではありません。

IframeページでCSSリセットを使用すると（親ページでも問題はありません）、すべてうまくいきます。

于 2013-02-21T20:09:47.583 に答える