1

考虑以下在所有现代浏览器中运行良好的代码。

CSS：

    .container {
        width: 400px;
        height: 150px;
        border: solid 1px #CCC;
        position: relative;
        margin: 20px auto;
        overflow: hidden;
    }

    .toc {
        position: absolute;
        bottom: 1px;
    }

    .sections {
        width: 800px;
    }

    .item {
        float: left;
        width: 400px;
        height: 150px;
        position: relative;
        margin-left: 0px;
    }

标记：

<div class="container">
<div class="toc">
    <a data-rank="0" href="javascript:;">1</a><a data-rank="1" href="javascript:;">2</a>
</div>
<div class="sections">
    <div class="item" data-rank="0">
        <h1>1: Hello World</h1>
    </div>
    <div class="item" data-rank="1">
        <h2>2: Hello World</h2>
    </div>
</div>
</div>

JS：

$(document).ready(function() {
    $('a').on("click",function(e) {
        var $target = $(e.target);
        var s = $target.attr('data-rank');

        $('.sections').animate({ marginLeft : + -(s * 400) + "px"}, 1200);
    });
});

问题：在 IE7 中，“toc-div”和“sections-div”一样是动画的。将其位置更改为相对位置而不是绝对位置，它将起作用，但是我无法将其放置在我想要的位置。

我非常感谢一个解决方案！

4

3 回答 3

3

另一种解决方案是添加：

zoom: 1;

它有助于错误的定位和消失的元素。

于 2013-01-29T06:35:22.983 回答
3

尝试将以下内容添加到 .toc css

left: 0;

我正在我的 VM IE7 上进行测试，它似乎可以工作。此外，使用提供的代码，我认为我无法单击 FF 11 中的链接，我必须添加 z-index。

于 2012-05-15T18:16:46.090 回答
0

这是一个解决方案。像这样使用滚动 div移动toc容器的外部......

<body>
<div class="toc">
    <a data-rank="0" href="javascript:;">1</a>&nbsp;<a data-rank="1" href="javascript:;">2</a>
</div>
<div class="container">
<div class="sections">
    <div class="item" data-rank="0">
        <h1>1: Hello World</h1>
    </div>
    <div class="item" data-rank="1">
        <h2>2: Hello World</h2>
    </div>
</div>
</div>

然后修改 CSS 以使其toc出现在您想要的位置...

.toc {
    position: relative;
    top: 165px;
}
于 2012-05-15T16:32:46.870 回答