2013-02-21 6 views
8

Ich entwickle gerade eine rotierende Montage von Mixed Media auf einer Website. Es gibt ungefähr 5 Bilder/Videos, die auf der Website in Rotation angezeigt werden. Die Seite nutzt auch das Ektron CMS, also kann ich nicht bestimmen, welche Slots in der Montage Bilder sind und welche Videos sein werden. (Die Videos sind auf YouTube gehostet.)Wie kann ich einen zusätzlichen Rand von INSIDE in einem Iframe entfernen?

Also, mein Problem ist, dass die Videos perfekt ausgerichtet mit der Innenkante des Iframe geladen werden, aber die Bilder laden mit einem geringen Abstand von etwa 10px INNERHALB der iframe, die ist schlecht, weil unsere Website sehr genau ausgelegt ist und eine geringe Variation von sogar eine Pixel kann es vermasseln. Dies erscheint nur in FireFox und IE. Ich habe es in Chrome und Safari getestet und es funktioniert perfekt. Diese 4 Browser sind die einzigen 4, die wir offiziell unterstützen.

Hier ist mein 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 

Die CSS ist wie folgt:

#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;} 

Dies ist der einzige Code auf der Website, die die Art und Weise, dass die Iframes Anzeige aktiv beeinflusst.

Also meine Frage ist, wie kann ich diesen Rand innerhalb des Iframe loswerden und warum zeigt es nur in FireFox und IE ???

Antwort

3

Es ist der Rumpf des Iframe-Inhalts, der dies steuert, nicht der Iframe selbst.

Verwenden Sie eine CSS reset auf den Iframe-Seiten (es wird auch nicht auf der übergeordneten Seite weh tun) und alles wird gut.

+0

Wenn der Inhalt des iframe nur entweder ein eingebettetes Video von YouTube ist oder ein Bild aus dem Web-Server, wie kann ich dann das CSS-Reset durchführen, wie Sie bereits erwähnt? –

+0

Sie können den Inhalt eines Iframe aus einer anderen Domäne aufgrund der gleichen Ursprungsrichtlinie, die vorhanden ist, um Cross-Site-Scripting-Angriffe zu verhindern, nicht steuern. –

+0

Nun, ich brauche den CSS-Reset für die Youtube-Videos nicht, weil sie bereits funktionieren (wahrscheinlich haben sie ihr eigenes CSS, das das schon tut). Es sind die Bilder vom Webserver (in der gleichen Domäne), mit denen ich Probleme habe. –

Verwandte Themen