2008-09-15 15 views
19

Ich habe einen iframe. Der Inhalt ist breiter als die Breite, die ich einstelle, so dass der Iframe eine horizontale Bildlaufleiste erhält. Ich kann die Breite des Iframes nicht vergrößern, deshalb möchte ich nur die Bildlaufleiste entfernen. Ich habe versucht, die scroll-Eigenschaft auf "Nein" zu setzen, aber das tötet beide Bildlaufleisten und ich möchte die vertikale. Ich habe versucht, overflow-x auf "hidden" zu setzen, und das hat die horizontale Bildlaufleiste in ff gekillt, aber nicht in IE. traurig für mich.Gefürchte iframe horizontale Bildlaufleiste kann nicht in IE entfernt werden?

Antwort

43
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" 

Setzen Sie das in Ihrem iFrame-Tag.

Sie müssen nicht versuchen, dies in CSS zu formatieren.

+1

zOMG. Während die Attribute horizontalscrolling und verticalscrolling auf MSDN völlig undokumentiert erscheinen, hat dies zur Lösung meines IE 6 Problems beigetragen. –

+1

Große Lösung, genau das, was ich suchte, Tyvm. – David

+0

Ein Problem mit IE10 (ja, von unseren Kunden wird es immer noch verwendet), wo wir einige benutzerdefinierte HTML5-Anzeigen innerhalb von iframe anzeigen. Diesen Trick zu tun hat bei uns nicht funktioniert ... – lkartono

5

Sie könnten versuchen, den iframe in ein div zu setzen und dann das div für das Scrollen verwenden. Sie können das Scrollen auf dem Div in IE ohne Probleme steuern, IE hat nur wirklich Probleme mit Iframe Scrollen. Hier ist ein schnelles Beispiel, das den Trick machen sollte.

<html> 
    <head> 
     <title>iframe test</title> 

     <style>   
     #aTest { 
      width: 120px; 
      height: 50px; 
      padding: 0; 
      border: inset 1px #000; 
      overflow: auto; 
     } 

     #aTest iframe { 
      width: 100px; 
      height: 1000px; 
      border: none; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="aTest"> 
      <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe> 
     </div> 
    </body> 
</html> 
+0

Vielen Dank für diese Lösung. Das einzige Problem ist, dass Sie eine feste Höhe für den Iframe-Inhalt definieren müssen, was in meinem Fall variieren wird. Ich werde das verwenden und muss eine extra große Höhe für den iframe angeben, die irgendwie hacky ist. Aber vielen Dank, das hat mich dorthin gebracht. – mrjrdnthms

24

Die Scrollbar ist nicht eine Eigenschaft der , es ist eine Eigenschaft der Seite, die es enthält. Versuchen Sie overflow-x: hidden auf das <html> Element der inneren Seite zu setzen.

+1

arbeitete mit Körperelement. Vielen Dank! –

+2

Diese Lösung ist so viel besser, dass der iframe-Code leicht bleibt und die Kapselung begünstigt. Ich sollte nicht daran denken müssen, Syntax hinzuzufügen und zu merken. –

+3

Ich stimme @DannyG zu. In unserem Markup haben wir die Ära der Präsentationsattribute hinter uns gelassen. Reine CSS-Lösungen sind aus mehreren Gründen vorzuziehen. – DuxPrime

0
<iframe style="overflow:hidden;" src="about:blank"/> 

sollte in IE funktionieren. IE6 hatte Probleme bei der Unterstützung von overflow-x und overflow-y.

Eine andere Sache zu beachten ist, dass IE Grenze auf dem Iframe kann nur entfernt werden, wenn Sie das Attribut "frameborder" in CamelCase.

es wäre nett, wenn Sie es richtig mit CSS formatieren könnten, aber es funktioniert nicht in IE.

+0

In meinem Fall möchte ich die X-Bildlaufleiste entfernen, aber nicht er y und ich glaube, die Einstellung der Überlauf versteckte entfernt beide. Habe ich das richtig? – mrjrdnthms

0

Alle diese Lösungen funktionierten nicht für mich oder waren nicht zufriedenstellend. Mit dem scrollbaren DIV könntest du die horizontale Bildlaufleiste verschwinden lassen, aber du hättest dann immer die vertikale Scrollleiste.

Also, für meine Website, wo ich sicher sein kann, die feste Höhe aller iframes zu kontrollieren, funktioniert diese folgende Lösung sehr gut. Es verbirgt sich einfach die horizontale Scrollbar mit einem DIV :)

<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes --> 
<!--[if IE]> 
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;"> 
</div> 
<![endif]--> 
<script type="text/javascript"> 
    if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null) 
    { 
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block"; 
    } 
</script> 
0

Sie können auch versuchen, die Breite des Körpers der Seite einstellen, die zu 99% innerhalb des iframe enthalten ist.

Verwandte Themen