0

我正在尝试制作一些滑动字幕，例如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,…&lt;/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");}
 );
4

2 回答 2

0

您的 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,…&lt;/span>
 </span>
 </a>
</div>

CSS：

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

CSS 代码中也有一些 hack，在 IE7 中可能并不完全适用。您可以注释掉其中一些以测试它们是否会导致问题。

于 2011-08-23T06:10:50.257 回答
0

我发现它来自标题的位置。我设置了一个顶部位置，但没有定义任何左侧或右侧位置。有了那段代码，它现在出现在 ie7 上：

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

但是在ie8和ie7上还是很慢。总之，问题解决了！

于 2011-09-01T22:54:42.480 回答