Question

请考虑以下代码，它们适用于所有现代浏览器。

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”。将它的位置改为亲戚而不是绝对，它会起作用，但我无法将它放在我想要的地方。

我非常感谢解决方案！

Answer 1

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

left: 0;

我在我的VM IE7上测试它似乎工作。另外，使用提供的代码，我无法点击FF 11中的链接，我想，我必须添加z-index。

Answer 2

另一种解决方案是添加：

zoom: 1;

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

Answer 3

这是一个解决方案。使用滚动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;
}

ie7位置绝对错误

3 个答案: