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位置绝对错误

回答

相关问题