IE에서 Hover가있는 이상한 CSS 문제

IE에서 꽤 귀찮은 문제가 있습니다. 알아낼 수없는 것 같습니다. 전제는 매우 간단합니다. 이미지가 있고 마우스를 올리면 반투명 한 배경으로 텍스트가 표시됩니다. Firefox, Safari 및 Chrome에서 잘 작동합니다. 그러나 IE에서는 div를 서로 겹치지 않고 float 특성을 따르지 않습니다. 여기에 CSS는 다음과 같습니다IE에서 Hover가있는 이상한 CSS 문제

.new-product-link { 
    background:#E0E0E0; 
    height:342px; 
} 
.new-product-link .new-container { 
    float:left; 
    width:94px; 
    height:94px; 
    padding:3px; 
    margin:6px 5px; 
    position:relative; 
    left:2px; 
    border:1px solid #BBB; 
} 
.new-product-link .new-container:hover { 
    border:1px solid #777; 
    cursor:pointer; 
} 
.newProduct { 
    float:left; 
    height:100px; 
    width:100px; 
    position:relative; 
    bottom:97px; 
    right:3px; 
    background:#777; 
    opacity:0.75; 
    display:none; 
} 
.newProduct span { 
    position:relative; 
    top:20px; 
    color:#F0F0F0; 
    font:bold 14px Arial; 
} 
.newProduct span span { 
    font:11px Arial; 
}

JS :

이

<script> 
$(".new-container").hover(
    function() {$(this).children("div").fadeIn(350);}, 
    function() {$(this).children("div").fadeOut(100);} 
); 
</script>

HTML : 작업 예를 들어

<div align="center" class="new-container"> 
    <img src="http://www.example.com/image.png"> 
    <div class="newProduct"> 
     <span class="newProduct-item">Item Number<br /> 
      <span>Click for Additional<br />Information</span> 
     </span> 
    </div> 
</div>

, HERE를 참조하십시오. 모든 것이 매우 단순 해 보이고 다른 주요 브라우저에서 잘 작동합니다. 누군가가 내 방식의 오류를 볼 수 있기를 바랍니다. 도움과 제안에 감사드립니다.

출처

2011-12-02 wiliam.orazi

그냥 댓글을의 : 당신이 앵커에 비해 뭔가 다른 ( 태그에 사용하는 경우 호버는 IE 제대로 작동하지 않습니다) – jValdron

@jValdron : IE6에서도 마찬가지입니다. 어떤 버전의 IE를 테스트하고 있습니까? – Kyle

나는 이것이