Новичок - ie7 и jquery .animate () - скользящие подписи - PullRequest
Новая
       40

Новичок - ie7 и jquery .animate () - скользящие подписи

0 голосов
/ 23 августа 2011

Я пытаюсь сделать несколько скользящих надписей, что-то вроде Мозаика , но легче.Все выглядит хорошо во всех основных браузерах (даже если это выглядит медленно в 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");}
 );

Ответы [ 2 ]

0 голосов
/ 02 сентября 2011

Я обнаружил, что это произошло с позиции заголовка. Я установил верхнюю позицию, но не определил ни левой, ни правой позиции. С этим фрагментом кода он теперь отображается на ie7: 

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

Но это все еще очень медленно на ie8 и ie7. В любом случае, проблема решена!

0 голосов
/ 23 августа 2011

Ваш 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.Вы можете закомментировать некоторые из них, чтобы проверить, не вызывают ли они проблемы.

...