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

以下を.toccssに追加してみてください

left: 0;

VM IE7でテストしていましたが、動作しているようです。また、提供されたコードでは、FF 11のリンクをクリックできなかったと思うので、z-indexを追加する必要がありました。

于 2012-05-15T18:16:46.090 に答える
3

別の解決策は、次を追加することです。

zoom: 1;

それは間違った配置と消えた要素に役立ちます。

于 2013-01-29T06:35:22.983 に答える
0

これが解決策です。tocこのようにスクロールdivを使用してコンテナの外側を移動します...

<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 に答える