IE8, позиционирование и зависание не работают - PullRequest
Новая
       27

IE8, позиционирование и зависание не работают

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

У меня установлена ​​псевдогалерея для отображения миниатюр и отображения увеличенного изображения при наведении на миниатюры.Увеличенное изображение расположено относительно его родительского эскиза.

Это работает в Google Chrome и Mozilla Firefox, но не в IE8.

Я провел некоторые исследования, но никакого прогресса в этом вопросе нет.В IE8 отображаются как миниатюра, так и увеличенное изображение.Ни «Видимость: скрытый», ни «зависание», ни «абсолютная позиция» не работают в IE8.

Буду признателен за любую помощь.Ниже приведен фрагмент кода: 

.main{
     float:right;
     display: block;
     Background-color:transparent;
     Margin: 20px 55px 20px 10px;
}

.main img{
     display: block;
     border:0;
}

.main:hover{
     background-color:#ffffff;
     position: relative;
     visibility:visible;
     z-index: 1400;
}

/*for bigger images*/
.main bigger {
     width: 500px;
     height: 500px;
     position: absolute;
     left: -2000px;
     visibility: hidden;
     overflow: hidden;
     background-color:transparent;
     border:0;
}

.main:hover img{
     z-index: 1400;
     position: relative;
}

.main:hover bigger{
     z-index: 1500;
     display:block;
     width: 500px;
     height: 500px;
     top: -100px;
     left: 200px;
     overflow: visible;
     visibility: visible;
     background-color: transparent;
     clear: none;
}

СПАСИБО

Ответы [ 2 ]

0 голосов
/ 03 сентября 2010

это выглядит так: <a class="main" href="#"><img src="" /><bigger><img src="" /></bigger></a>

Не делай этого.

Элемент <bigger> не существует. Вы не можете просто создать свои собственные элементы, даже в XHTML; не без создания пользовательского DTD в любом случае, что, вероятно, все еще не заставит его работать в IE, поскольку IE на самом деле не поддерживает XHTML.

Chrome и Firefox немного более снисходительны в том, как они работают с нераспознанными элементами, чем IE8, поэтому он работает в них.

Я бы предложил вам добавить к изображению класс bigger: <img src="" class="bigger" /> и избавиться от элемента <bigger>.

0 голосов
/ 02 сентября 2010 
/*for bigger images*/ 
.main bigger { width: 500px; height: 500px; position: absolute; left: -2000px; visibility: hidden; overflow: hidden; background-color:transparent; border:0; }

.main:hover img{ z-index: 1400; position: relative; }

.main:hover bigger{ z-index: 1500; display:block; width: 500px; height: 500px; top: -100px; left: 200px; overflow: visible; visibility: visible; background-color: transparent; clear: none; }

больше должен быть элементом или классом.если это класс, он должен быть .bigger , верно?

...