La barre de défilement horizontale redoutée iframe ne peut pas être supprimée dans IE?

StackOverflow https://stackoverflow.com/questions/67354

  •  09-06-2019
  •  | 
  •  

Question

J'ai un iframe. Le contenu étant plus large que la largeur définie, l'iframe reçoit une barre de défilement horizontale. Je ne peux pas augmenter la largeur de l'iframe, je souhaite donc simplement supprimer la barre de défilement. J'ai essayé de définir la propriété de défilement sur & "Non &"; mais cela tue les deux barres de défilement et je veux la verticale. J'ai essayé de régler overflow-x sur & "Hidden &"; et cela a tué la barre de défilement horizontale dans ff mais pas dans IE. triste pour moi.

Était-ce utile?

La solution 

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

Mettez cela dans votre tag iFrame.

Vous n'avez pas besoin de perdre votre temps à essayer de formater ceci en CSS.

Autres conseils

La barre de défilement n'est pas une propriété de <iframe>, mais une propriété de la page qu'elle contient. Essayez de mettre overflow-x: hidden sur l'élément <html> de la page intérieure.

Vous pouvez essayer de placer l'iframe à l'intérieur d'un div, puis utiliser le div pour le défilement. Vous pouvez contrôler le défilement sur la div dans IE sans problèmes, IE n'a vraiment que des problèmes avec le défilement iframe. Voici un exemple rapide qui devrait faire l'affaire. 

<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>

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

devrait fonctionner dans IE. IE6 avait des problèmes de prise en charge de overflow-x et de overflow-y.

Une autre chose à noter est que la bordure d'IE sur l'iframe ne peut être supprimée que si vous définissez la & "; frameborder &"; attribut dans camelCase. 

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

Ce serait bien si vous pouviez le styler correctement avec CSS, mais cela ne fonctionne pas dans IE.

Toutes ces solutions ne fonctionnaient pas pour moi ou n'étaient pas satisfaisantes. Avec le DIV à défilement, vous pourriez faire disparaître la barre de défilement horizontale, mais vous auriez toujours la verticale alors.

Donc, pour mon site où je peux être sûr de contrôler la hauteur fixe de tous les iframes, cette solution suivante fonctionne très bien. Il cache simplement la barre de défilement horizontale avec un 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>

Vous pouvez également essayer de définir la largeur du corps de la page inclus dans l'iframe à 99%.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top