1

我有一个页面，其中一些框以绝对位置定位。在 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 进行比较时 - 您会看到缩略图的标题完全关闭，并且以同样的方式 - 单击时出现黑框（在实时页面上）。

非常感谢！

4

1 回答 1

2

我很快就接受了，但这应该足以让你走上正轨。下面的示例在 IE6+、Firefox 和 Chrome 中进行了测试。

一些注意事项：我使用带有背景颜色和轮廓的 div 以及测试内容，但所有大小都与您的示例相同。默认情况下，我将其中一个叠加层“打开”，并默认隐藏其他叠加层，这样您就可以看到切换状态和基本状态。您需要重新添加 Javascript，这只是为了让您了解定位的工作原理。

乍一看，我认为您的问题是使用绝对定位的 div 而没有相对定位的容器。此外，“caption”和“caption-text” 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

于 2012-06-07T02:30:43.940 回答