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

css のオーバーフローのすぐ下にposition:relativeある elem に、相対的な位置を追加してみてください。overflow:hidden以前にIEでこの問題が発生しましたが、修正されました。

于 2012-09-19T21:25:49.793 に答える
3

いくつかのアイデアがあります。

  1. コンテンツアイテムの表示スタイルをインラインブロックに変更してみてください。
  2. スライドショーのコンテンツを比較的配置されたdivでラップしてみてください。これにより、ブラウザに子孫のレンダリング順序が通知されます。（前のボタンと次のボタンの位置を再計算する必要があります。実際、絶対に配置する必要はありません。ラッパーの外側に配置したり、左右に浮かせたりすることもできます。または、ボディに対して絶対に配置することもできます。それはあなた次第です。）
于 2012-09-20T16:45:09.627 に答える