Question

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

我知道将容器div设置为position:relative会有效，但是如果我这样做的话，就会显示“previous”和“next”按钮。

这在Firefox和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;
}

Answer 1

尝试将position:relative添加到overflow:hidden的元素中，以便在css正下方溢出添加位置相对。我以前在IE中遇到过这个问题并修复了它。

Answer 2

我有几个想法。

尝试将内容项的显示样式更改为内联块。
尝试将幻灯片显示的内容包装在相对定位的div中 - 这会告诉浏览器后代的呈现顺序。（你需要重新计算你的上一个和下一个按钮的位置。实际上，它们不再需要绝对定位 - 它们可以在包装物外面，左右浮动。或者你可以绝对地将它们相对于身体定位。这取决于你。）

IE9溢出隐藏的问题

2 个答案: