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以及测试内容，但所有尺寸都与您的示例相同。我默认情况下将其中一个叠加“打开”并默认隐藏其他叠加，这样您就可以看到切换状态和基本状态。您需要重新添加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

在IE7中定位

1 个答案: