Ответ: зависание IE 7 выпуск - PullRequest
Новая
       21

Ответ: зависание IE 7 выпуск

0 голосов
/ 28 октября 2011

Я пытаюсь создать на кнопке простую анимацию на основе CSS (при наведении она должна иметь отступ, как при нажатии кнопки) Он работает во всех браузерах, кроме IE 7, которые мы вынуждены поддерживать.

-------- EDIT --------

** ЭТО СКРИНШОТ ПРОБЛЕМЫ В IE 7: LINK

Вот что должно произойти: ССЫЛКА

приветствуется любая помощь с исправлением для IE 7! спасибо!

CSS: 

  /*itinerary Button Style*/    
    .gallery {
background-image:url(PageImages/hover.gif);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.gallery a{
background-image:url(PageImages/Itinerary.gif);
background-repeat: no-repeat;
height: 75px;
width: 200px;
display: block;
}

.gallery a:hover{
background: none;
}

HTML: 

<div class="gallery">
        <a href="http://www.sba.muohio.edu/mis399/student/ScheduleWinterSoutheastAsiaPlanAasdfseoinbxsdfjjdgccc.htm" style="margin-top:10%;"></a>
           </div>

Ответы [ 3 ]

1 голос
/ 28 октября 2011

Это, на мой взгляд, более чистое решение, которое будет работать в IE7 (http://jsfiddle.net/YYUef/1/):

HTML: 

<a href="#">Link</a>

CSS: 

a {
    /* PageImages/Itinerary.gif */
    background-image: url('http://placehold.it/50');
    display: block;
    height: 50px;
    width: 50px;
    text-indent: -99999px;
}
a:hover {
    /* PageImages/hover.gif */
    background-image: url('http://placehold.it/50/09e');
}

Вам просто нужно изменить URL-изображения, и все готово.

Редактировать: И лучшее решение, используя css sprites . Jsfiddle здесь . 

a {
    background-image: url('http://i44.tinypic.com/34j3g53.gif');
    display: block;
    height: 75px;
    width: 200px;
    text-indent: -99999px;
}
a:hover {
    background-position: 0 -75px;
}
0 голосов
/ 28 октября 2011

Если я правильно понимаю, проблема не возникает на hover, но в целом изображения не совпадают ..

Скорее всего, проблема с пробелами ..

установить HTML для 

<div class="gallery"><a href="http://www.sba.muohio.edu/mis399/student/ScheduleWinterSoutheastAsiaPlanAasdfseoinbxsdfjjdgccc.htm" style="margin-top:10%;"></a></div>

( удалить пробел между тегами )

Кроме того, как @scumah говорит в своем ответе, зачем устанавливать указатель мыши в качестве фона элемента div под ссылкой, а не просто изменять изображения в ссылке на hover ( и удалять ее из .gallery элемент полностью .. )? 

.gallery a:hover {
    background-image:url(PageImages/hover.gif);
}
0 голосов
/ 28 октября 2011

IE7 не будет просто принимать атрибут display:block для тегов <a>.Вам придется форсировать его, применяя zoom:1.

...