新手 - IE7和jQuery .animate（） - 滑動字幕

我試圖做一些滑動字幕，像Mosaic，但較輕。在所有主流瀏覽器中，一切都看起來不錯（即使ie8看起來很慢），但在ie7中沒有任何反應。我正在測試ieTester，我不知道該錯誤是來自軟件還是來自我的代碼。我相信你會有一些提示來幫助我改進它！新手 - IE7和jQuery .animate（） - 滑動字幕

還是要謝謝你。

HTML：

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");} 
);

來源

2011-08-23 Sanka51

我發現它從標題的位置來了。我設置了一個頂部位置，但沒有定義任何左側或右側的位置。隨着這段代碼，現在看來在IE7：

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

但它仍然在IE8和IE7的速度很慢。無論如何，問題解決了！

來源

2011-09-01 22:54:42 Sanka51

你的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可能並不適用。你可以評論一些他們來測試他們是否會造成問題。

來源

2011-08-23 06:10:50 Guffa

嗨，謝謝@Guffa 我試過了你說的，但是這並沒有改變ie7的任何東西。有沒有更好的方法來製作簡單的滑動標題？我也試過只用CSS，而沒有任何轉換： '.imgbox：hover> .caption {top：0;}' 但在ie7中沒有任何事情發生。 – Sanka51

新手 - IE7和jQuery .animate（） - 滑動字幕

回答

相關問題