ie7位置絕對錯誤

請考慮下面的代碼，它適用於所有現代瀏覽器。ie7位置絕對錯誤

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-格」是動畫以及「sections- DIV」。改變它的位置，而不是絕對的，它會工作，但然後我無法把它放在我想要的地方。

我更欣賞的解決方案！

來源

2012-05-15 Björn Andersson

IE7中的父容器至少在Z-index和這樣的條款曾在關於元素的絕對定位的一些問題的時候。您可能想嘗試將該容器元素設置爲絕對位置，即使這可能會導致更多工作。 – Rooster

你可以在jsfiddle中發佈樣例演示或類似的東西嗎？ – Huangism

nvm我想通了，看到我的回答 – Huangism

嘗試添加以下到.TOC CSS

left: 0;

我對我的VM IE7測試，它似乎工作。另外，通過提供的代碼，我無法點擊FF 11中的鏈接，我認爲我必須添加z-index。

來源

2012-05-15 18:16:46 Huangism

謝謝，不知道它會那麼簡單！ –

是的，有一次，我有一個拼寫錯過了一段時間尋找 – Huangism

這是一個解決方案。移動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-15 16:32:46 Brad

另一個解決方案是增加：

zoom: 1;

它有助於定位錯誤和消失的元素。

來源

2013-01-29 06:35:22 19Gerhard85

ie7位置絕對錯誤

回答

相關問題