IE9 Dépassement de problème caché

Je vais avoir un problème dans IE9 (au moins, vous n'avez pas vérifié les autres IE) où un div avec overflow:hidden est ignoré par enfant div. Le contour bleu div de l'image est le overflow:hidden div conteneur. Les images doivent être contenues à l'intérieur du conteneur.

Je sais que la définition de la div conteneur à position:relative va fonctionner, mais il n'y a absolument placé "précédent" et "suivant" boutons qui ne sont pas affichés si je le fais.

Cette affiche bien dans Firefox et Chrome

Réelle
IE9 Dépassement de problème caché

Devrait
IE9 Dépassement de problème caché

html

<div id="instagramViewer" class="slideshow">
    <div class="slideshowButton" id="prevImage" style="display: block;">
        <a href="#" title="Previous">Previous</a>
    </div>
    <div class="slideshowButton" id="nextImage">
        <a href="#" title="Next">Next</a>
    </div>
    <div class="contentItem>
        <span class="contentItem" style="display: block;">
            <a href="javascript: void(0);">
                <img alt="words" src="http://www.example.com/image.jpg">
            </a>
            <div class="detailsWrapper" style="display: none; opacity: 0.678511;">...</div>
        </span>
        <span class="contentItem" style="display: block;">
            <a href="javascript: void(0);">
                <img alt="words" src="http://www.example.com/image.jpg">
            </a>
            <div class="detailsWrapper" style="display: none; opacity: 0.678511;">...</div>
        </span>
        <span class="contentItem" style="display: block;">
            <a href="javascript: void(0);">
                <img alt="words" src="http://www.example.com/image.jpg">
            </a>
            <div class="detailsWrapper" style="display: none; opacity: 0.678511;">...</div>
        </span>
    </div>
</div>

css

.instagramViewerWrapper .slideshow {
    overflow: hidden;
}
.instagramViewerWrapper .slideshow .content {
    margin-left: 256px;
    padding-top: 14px;
    position: relative;
    white-space: nowrap;
}
.instagramViewerWrapper .slideshow .content .contentItem {
    display: inline-block !important;
    margin: 0 14px 0 0;
    vertical-align: top;
}
.instagramViewerWrapper .slideshow .slideshowButton {
    margin-top: 20%;
    position: absolute;
}
.instagramViewerWrapper .slideshow #prevImage {
    left: -75px;
}
.instagramViewerWrapper .slideshow #nextImage {
    right: -75px;
}
J'ai quelques idées. 1. Essayez de changer le style d'affichage de vos éléments de contenu inline-block. 2. Essayez de changer le conteneur de positionnement relatif - ce qui est nécessaire pour indiquer au navigateur sur le rendu de la hiérarchie. Malheureusement, vous pourriez avoir à revoir la conception de votre précédent et suivant des boutons. Peut-être que vous pourriez faire de la position du corps par rapport ou ajouter le positionnement relatif à ce que l'élément contient.
se basant sur le commentaire que j'ai terminé la refonte de mon code html, de sorte que div.content a un parent div.contentWrapper. L'emballage a position: relative; overflow: hidden;. Si vous postez votre commentaire en réponse, je vais vous donner le crédit. Merci encore 🙂
Fait 🙂 Heureux d'entendre, il a travaillé 🙂

OriginalL'auteur bflemi3 | 2012-09-19

  1. 3

    J'ai quelques idées.

    1. Essayez de changer le style d'affichage de vos éléments de contenu
      inline-block.
    2. Essayer d'emballage le contenu du diaporama dans une position relative div - cela indique au navigateur sur l'ordre de rendu des descendants. (Vous aurez besoin de recalculer le positionnement de votre précédent et suivant des boutons. En fait, ils n'ont plus besoin d'être en position absolue - ils pourraient être à l'extérieur de l'emballage, flottait à gauche et à droite. Sinon, vous pouvez absolument de leur position par rapport au corps. C'est à vous.)
    Est allé avec le numéro 2

    OriginalL'auteur Kev

  2. 4

    Essayez d'ajouter position:relative à l'elem qui est overflow:hidden afin de vous css ci-dessous à droite dépassement ajouter de la position relative. J'ai eu ce problème dans IE avant et qu'il fixe.

    Merci.! J'ai eu des problème similaire, et résolu par l'ajout d' position:relative.

    OriginalL'auteur Alex Reynolds