jQuery动画IE7

Question

我有一个巨大的问题，我无法解决的IE7。一个问题是溢出：隐藏，一直在阅读一些关于它的内容，但是却无法使其发挥作用。

http://jsfiddle.net/39bhW/3/

有没有人有一个提示如何解决呢？

---

CSS：

#items { 
    display: inline; 
    position:relative; 
    margin: 0; 
    padding: 0; 
} 
#items li { 
    float: left; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
} 
#items .itemplaceholder { 
    height:200px; 
    width:160px; 
    text-align: center; 
    position: relative; 
} 
.placeholder { 
    width:640px; 
    height:200px; 
    overflow: hidden; 
} 
.content { 
    width:800px; 
    height:240px; 
} 
#items .itemplaceholder p { 
    position: absolute; 
    bottom: 5px; 
    width: 100%; 
    height: 50%; 
} 
#items .itemplaceholder p a { 
    position: absolute; 
    display: block; 
    bottom: 0; 
    text-align: center; 
    width: 100%; 
} 

HTML：

<div class="placeholder"> 
     <div class="content"> 
     <ul id="items"> 
      <li> 
       <div class="itemplaceholder"> 
       <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/> 
        <p> 
         Test title<br/> 
         Description A 
         <a href="#">Link</a> 
        </p> 
       </div> 
      </li> 
      <li> 
       <div class="itemplaceholder"> 
        <span> 
       <img src="http://www.aja.com/images/software/AJA_TestIconNEW.png"/> 
        <p> 
         Little bit longer title for test<br/> 
         Another description that is longer 
         <a href="#">Link</a> 
        </p> 
        </span> 
       </div> 
      </li> 
      <li> 
       <div class="itemplaceholder"> 
        <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/> 
        <p> 
         Title 3<br/> 
         Lorem ipsum 
        <a href="#">Link</a> 
        </p> 
       </div> 
      </li> 
      <li> 
       <div class="itemplaceholder"> 
        <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/> 
        <p> 
         Title<br/> 
         Text 
         <a href="#">Link</a> 
        </p> 
       </div> 
      </li> 
      <li> 
       <div class="itemplaceholder"> 
        <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/> 
        <p> 
         Title title title<br/> 
         Lorem ipsum 
         <a href="#">Link</a> 
        </p> 
       </div> 
      </li> 
      <li> 
       <div class="itemplaceholder"> 
        Item F 
       </div> 
      </li> 
     </ul> 
     </div> 
    </div> 

    <a href="#" id="prev">Prev</a> 
    <a href="#" id="next">Next</a> 

JQ：

function next() { 
    $menu = $('#items'); 
    $first = $menu.find("li").first(); 
    unbindClick(); 


    $first.animate({ 
     marginLeft: -1 * $first.width() 
    }, { 
     duration: 600, 
     queue: false, 
     complete: function() { 
      $menu.append($first); 
      $first.css('marginLeft', ''); 
      bindClick(); 
     } 
    }); 
} 

function prev() { 
    $menu = $('#items'); 
    $first = $menu.find("li").first(); 
    $last = $menu.find("li").last(); 
    $menu.prepend($last); 

    var width = $last.width(); 
    $last.css('marginLeft', -1 * width + "px"); 
    $menu.prepend($last); 
    unbindClick(); 

    $last.animate({ 
     marginLeft: 0 
    }, { 
     duration: 600, 
     queue: false, 
     complete: bindClick 
    }); 
} 

function unbindClick() { 
    $("#next").unbind('click'); 
    $("#prev").unbind('click'); 
} 

function bindClick() { 
    $("#next").click(next); 
    $("#prev").click(prev); 
} 

$("#next").click(next); 
$("#prev").click(prev); 

Answer 1

添加position:relative到需要溢出的元素：
你比如它的元素.placeholder

.placeholder { 
    position:relative; 
    width:640px; 
    height:200px; 
    overflow: hidden; 
} 

P.S：总是设置一个'位置'来溢出元素！

---

编辑

关于IE浏览器的问题，你必须symultaneously同时处理left和margin-left的位置：

jsBin example

（点击保存下载和测试IE） （PS：你仍然需要修复你的a标签的CSS，但现在困难的事情已经结束:)）

function next() { 
    $menu = $('#items'); 
    $first = $menu.find("li").first(); 
    unbindClick(); 

    var firstW = $first.width(); // added 

    if ($.browser.msie && $.browser.version < 8.0) { // added 
     $first.animate({left: -firstW},600); 
    } 

    $first.animate({ 
     marginLeft : -firstW // changed 
    }, { 
     duration: 600, 
     queue: false, 
     complete: function() { 
      $menu.append($first); 
      $first.css({marginLeft:0, left: 0}); // added left: 0 
      bindClick(); 
     } 
    }); 
} 

function prev() { 
    $menu = $('#items'); 
    $first = $menu.find("li").first(); 
    $last = $menu.find("li").last(); 
    //$menu.prepend($last); // removed 

    var lastW = $last.width(); 

    if ($.browser.msie && $.browser.version < 8.0) { // added 
     $last.css({left: -lastW}); 
    }  

    $last.css({marginLeft: -lastW}); 
    $menu.prepend($last); 
    unbindClick(); 

    $last.animate({ 
     marginLeft: 0, 
     left:0    // added 
    }, { 
     duration: 600, 
     queue: false, 
     complete: bindClick 
    }); 
}