5

我在 IE9 中遇到问题（至少，没有检查其他 IE），其中一个 divoverflow:hidden被它的子 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;
}
4

2 回答 2

4

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

于 2012-09-19T21:25:49.793 回答
3

我有几个想法。

  1. 尝试将内容项的显示样式更改为 inline-block。
  2. 尝试将幻灯片的内容包装在相对定位的 div 中 - 这会告诉浏览器后代的呈现顺序。（你需要重新计算你的上一个和下一个按钮的位置。事实上，它们不再需要绝对定位——它们可以在包装之外，左右浮动。或者你可以相对于身体绝对定位它们。由你决定。）
于 2012-09-20T16:45:09.627 回答