새내기 - ie7 및 jquery .animate() - 자막 자막

Question

가벼운 자막을 사용하려고합니다. 예를 들어, Mosaic과 같은 슬라이딩 캡션을 만들려고합니다. 모든 주요 브라우저에서 모든 것이 잘 보이지만 (ie8에서 느린 것처럼 보일지라도) ie7에서는 아무 일도 일어나지 않습니다. ieTester으로 테스트 중이며 소프트웨어 또는 코드에서 버그가 발생했는지 전혀 알 수 없습니다. 개선 할 수있는 몇 가지 정보가있을 것입니다.

아무튼 고마워요.

HTML :

<div class="imgbox"> 
<img src="#" /> 
<a href="#" class="caption"> 
<div class="details"> 
<h6>Lorem ipsum</h6> 
<p>Lorem ipsum dolor sit amet,…</p> 
</div> 
</a> 
</div> 

CSS :

.imgbox{ 
width: 204px; 
height: 154px; 
position: relative; 
overflow: hidden; 
float: left; 
margin: 10px; 
border:1px solid #999; 
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8); 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);} 

.imgbox img{ 
width: 200px; 
height: 150px; 
padding: 2px; 
overflow: hidden;} 


.caption{ 
display:block; 
position:absolute; 
top:104px; 
height:100%; 
width:100%; 

background: rgb(0,0,0); 
background: rgba(0,0,0,0.6); 
background: transparent\9; 
zoom: 1; 
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);} 

JS :

$(".imgbox").hover(
    function() 
    {$(this).children('.caption').animate({top:0},"fast");}, 
    function() 
    {$(this).children('.caption').animate({top:104},"fast");} 
); 

Answer 1

캡션의 위치에서 발견되었습니다. 상단 위치를 설정했지만 왼쪽 또는 오른쪽 위치를 정의하지 않았습니다.

.caption{ 
display:block; 
position:absolute; 
top:104px; 
left:0; 
height:100%; 
width:100%; 

하지만 여전히 IE8 및 IE7에 매우 느린 : 지금 IE7에 나타나는 코드의 조각 . 어쨌든, 문제가 해결되었습니다!

Answer 2

귀하의 HTML 코드가 잘못되었습니다. a 요소는 인라인 요소이며 div과 같은 블록 요소를 포함 할 수 없습니다. 브라우저는 잘못된 마크 업을 다룰 수있는 여러 가지 방법이 있으며 특정 태그를 재정렬하거나 무시하여 유효한 요소를 만들 수 있습니다. 링크 내부

넣어 인라인 요소들은 다음 블록 요소로를 설정하는 CSS를 사용하여 올바르게 구문 분석되도록 :

<div class="imgbox"> 
<img src="#" /> 
<a href="#" class="caption"> 
<spap class="details"> 
<span class="h6">Lorem ipsum</span> 
<span class="p">Lorem ipsum dolor sit amet,…</span> 
</span> 
</a> 
</div> 

CSS :

.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; } 

가 일부 해킹 있습니다 CSS 코드에서 IE7과 잘 어긋나지 않을 수도 있습니다. 문제의 원인을 테스트하기 위해 이들 중 일부를 주석으로 처리 할 수 ​​있습니다.