css - IE7 でのポジショニングオフ

Question

絶対位置に配置されたいくつかのボックスを含むページがあります。IE8 と IE9 では完全に動作しますが、IE7 は完全に不安定になります。

関連する HTML は次のとおりです。

          <div id="thumbHolder">

            <div class="thumb upper"><a href="#pic1" rel="-339" title="" >
                <img src="../images/ui/telaviv1.jpg" alt="Jaffa" border="0" />
                <div class="caption"></div>
                <div class="captionText">Jaffa</div>
                <div class="rolloverText">
                <strong>Jaffa</strong><br />

    Visit the ancient
    port city, its artist colony
    and markets
                </div>
                </a>
            </div>

            <div class="thumb upper"><a href="#pic2" rel="-678" title="">
                <img src="../images/ui/telaviv2.jpg" alt="Neve Tzedek" border="0" />
                <div class="caption"></div>
                <div class="captionText">Neve Tzedek</div>
                 <div class="rolloverText">
               <strong> Neve Tzedek</strong><br />

    Explore the charming and
    fashionable neighborhood,
    the first to be built outside
    of Jaffa
                </div>
                </a>
            </div>

            <div class="thumb upper right"><a href="#pic3" rel="-1017" title="">
                <img src="../images/ui/telaviv3.jpg" alt="The White City" border="0" />
                <div class="caption"></div>
                <div class="captionText">The White City</div>
                 <div class="rolloverText">
               <strong> The White City</strong><br />

    Accredited a UNESCO
    world heritage site for
    its Bauhaus architecture
                </div>
                </a>
            </div>

            <div class="thumb"><a href="#pic4" rel="-1356" title="Messa Restaurant">
                <img src="../images/ui/telaviv4.jpg" alt="Restaurants" border="0" />
                <div class="caption"></div>
                <div class="captionText">Restaurants</div>
                 <div class="rolloverText">
                <strong>Restaurants</strong><br />

    Enjoy the finest
    restaurants, bars and clubs
    Israel has to offer

                </div>
                </a>
            </div>

            <div class="thumb"><a href="#pic5" rel="-1356" title="Menashe Kadishman’s Studio">
                <img src="../images/ui/telaviv5.jpg" alt="Art" border="0" />
                <div class="caption"></div>
                <div class="captionText">Art</div>
                 <div class="rolloverText">
                <strong>Art</strong><br />

    Explore art Galleries
    and meet with Israel’s
    top artists
                </div>
                </a>
            </div>



            <div class="thumb"><a href="#pic6" rel="-1356" title="Habima - National Theatre">
                <img src="../images/ui/telaviv6.jpg" alt="Culture" border="0" />
                <div class="caption"></div>
                <div class="captionText">Culture</div>
                 <div class="rolloverText">
                <strong>Culture</strong><br />

    Enjoy live performances
    and concerts

                </div>
                </a>
            </div>


        </div>

CSSは次のとおりです。

            #thumbHolder {width: 559px; overflow:hidden; position: relative; margin-bottom: 15px;}
    .thumb {float:left; width: 174px; margin-right: 18px;}
    .thumb a {text-decoration: none;}
    .caption { background: #000;    zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        padding: 4px;

        position: absolute;
        width: 166px; margin-top: -24px;    height:15px;}
    .captionText { 
        color:#FFF; position: absolute; padding:4px; width: 166px;  margin-top: -23px;  height:15px; text-align:center; font-weight: bold;}

    .rolloverText {background: #000;
        color: #FFF;
        padding: 6px;
        margin-top: -88px;
        height: 74px;
        position: absolute;
        width: 162px;
        line-height: 125%;
        display: none;
        font-size: 95%;}
    .upper {margin-bottom: 15px;}
    .right {margin-right: 0;}

実際のページへのリンクは次のとおりです: http://bit.ly/L47Qka (インデックス作成のために、このリンクを実際のリンク先に戻さないでください)

IE8 と IE9 を IE7 と比較すると、サムネイルのキャプションが完全にオフになっていることがわかります。同じように、クリックすると (ライブ ページで) 黒いボックスが表示されます。

どうもありがとう！

Answer 1

私はこれをすぐに撮影しましたが、軌道に乗るにはこれで十分です。以下の例は、IE6+、Firefox、および Chrome でテストされています。

いくつかのメモ: テスト コンテンツと共に背景色とアウトラインを含む div を使用しましたが、すべてのサイズは例と同じです。オーバーレイの 1 つをデフォルトで「オン」にし、他のオーバーレイをデフォルトで非表示にして、トグル状態と基本状態の両方を確認できるようにしました。Javascript を再度追加する必要があります。これは、ポジショニングがどのように機能するかを確認するためです。

一見すると、あなたの問題は、相対的に配置されたコンテナーなしで絶対に配置された div を使用したことだと思います。また、「キャプション」および「キャプションテキスト」の div についても、いくつかの負のマージンが問題を引き起こしているように見えました。

CSS:

body{
    margin:0;
    padding:0;
}

#wrapper{
    width:559px;
    height:400px;
    position:relative;
}

.thumb-wrapper{
    border:1px solid red;
    float:left;
}

.col1, .col2{
    margin-right:15px;
}

.row1{
    margin-bottom:15px;
}

.thumb-inner{
    width:174px;
    height:86px;
    position:relative;
}

.caption-wrapper{
    position:absolute;
    bottom:0;
    height:15px;
    width:100%;
    text-align:center;
    padding-bottom:4px;
    background-color:#000;
    color:#fff;
}

.rollover-text{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background-color:#000;
    color:#fff;
    display:none;
}

HTML

<div id="wrapper">
    <div class="thumb-wrapper row1 col1" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" style="display:block;">
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row1 col2" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row1 col3" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row2 col1" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row2 col2" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row2 col3" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
</div>

完全な HTML へのリンクは次のとおりです: http://pastehtml.com/view/c0n37a140.html