IE9溢出隐藏问题

Question

我在IE9中遇到了问题（至少我还没有检查其他的IE版本），即一个带有overflow:hidden属性的div被它的子div所忽略。图像中蓝色轮廓的div是overflow:hidden容器div，图像应该被包含在容器中。

我知道将容器div设置为position:relative可以解决这个问题，但如果我这样做，绝对定位的“上一个”和“下一个”按钮将不会显示。

在Firefox和Chrome中，这个效果显示得很好。

实际效果： 预期效果： 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;
}

- bflemi3

---

我有几个想法。

1. 尝试将内容项的显示样式更改为inline-block。
2. 尝试更改容器定位为relative - 这是必要的，以便告诉浏览器渲染层次结构。不幸的是，您可能需要重新设计prev和next按钮。也许您可以使body位置相对或在包含它们的任何元素中添加相对定位。

- Kev

根据@Kryptonite的评论，我重新设计了我的HTML，使div.content具有父级div.contentWrapper。包装器具有position: relative; overflow: hidden;。如果您将您的评论发布为答案，我会给您信用。再次感谢 :) - bflemi3

完成 :) 很高兴听到它起作用了 :) - Kev

Answer 1

尝试在设置了“overflow:hidden”的元素中添加“position:relative”，以便在CSS中，把“position:relative”加在overflow下面。我之前在IE上遇到过这个问题，这样做就解决了。

- Alex Reynolds

---

谢谢！我遇到了类似的问题，通过添加 position:relative 解决了。 - Soeb Safi

Answer 2

我有几个想法。

1. 尝试将内容项目的显示样式更改为inline-block。
2. 尝试将幻灯片的内容包装在一个相对定位的div中 - 这告诉浏览器后代元素的渲染顺序。（您需要重新计算prev和next按钮的定位。实际上，它们不再需要绝对定位 - 它们可以在包装器之外，左右浮动。或者您可以将它们相对于body绝对定位。由您决定。）

- Kev