IE9 Overflow Problem

I have a problem with IE9 (at least not checking other IEs) where the div with is overflow:hiddenignored by the child div. The blue div in the image is the div overflow:hidden. Images must be contained in a container.

I know that setting the container div to position:relativewill work, but there are absolutely positioned “previous” and “next” buttons that will not be displayed if I do this.

This is clearly seen in Firefox and Chrome

Actual

Expected

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